Preview LQIP randomly not going away and doesn't show full image?

[Galanthus]

"I'm trying to solve a problem where the Low-Quality Image Placeholder (LQIP) sometimes doesn't display the full image upon loading or when it's in the viewport. How can I fix this?

"use client"

import { SanityImage } from "sanity-image"

import { dataset, projectId } from "@/sanity/lib/api"

interface ImageBoxProps {
  image?: Image
  mode?: "cover" | "contain"
  loading?: "lazy" | "eager"
  width?: number
  height?: number
  size?: string
  classesWrapper?: string
  preview?: boolean
}

const ImageBox = ({
  image,
  width = 1400,
  height,
  classesWrapper,
  mode,
  loading = "lazy",
  preview = true // Set the default value of preview to true (enabled)
}: ImageBoxProps) => {
  if (!image?._id) return null

  const { _id, lqip, hotspot, crop, alt } = image

  const previewValue = preview ? lqip : undefined

  return (
    <SanityImage
      id={_id}
      className={classesWrapper}
      dataset={dataset}
      projectId={projectId}
      hotspot={hotspot}
      preview={previewValue}
      crop={crop}
      width={width}
      height={height}
      mode={mode}
      alt={alt}
      loading={loading}
      queryParams={{ q: 90 }}
    />
  )
}

export default ImageBox

[coreyward]

Hey, did you see this in the README already? This is usually the issue. See #40 for some more on this as well.

[Galanthus]

Hi Corey,

Thanks for the quick reply. Actually, I am using the same CSS like so:

img[data-loading] {
  @apply absolute !w-[10px] !h-[10px] opacity-0 -z-10 pointer-events-none select-none;
}

It's randomly showing a placeholder and won't show the full unless it's fully inside the viewport.

[coreyward]

Right, you might need to update those styles (which are applied already) to ensure the full size image tag is not clipped/hidden. It might be in your case that it's showing further down the page than the placeholder image based on the rest of your styles. The browser will wait until you're just about down to the lazy loaded image before it loads, so you want it aligned with the top of your placeholder. The default styles do that in most cases, but not all. If you have a link to where this is live I can try to take a look.

[Galanthus]

Right, you might need to update those styles (which are applied already) to ensure the full size image tag is not clipped/hidden. It might be in your case that it's showing further down the page than the placeholder image based on the rest of your styles. The browser will wait until you're just about down to the lazy loaded image before it loads, so you want it aligned with the top of your placeholder. The default styles do that in most cases, but not all. If you have a link to where this is live I can try to take a look.

Thank you for taking a look!

https://bright-bunch-v2.vercel.app/cases/zorgwijzer

[coreyward]

Confirmed that this is just a CSS issue. The full-size image (shown at 10x10px) is showing near the bottom-left corner of the main image. Since you have very tall images, that means the image doesn't get near the viewport until the low-quality preview is already well-within the viewport.

By setting position: relative on the figure element closest to the image and adding top: 10px; left: 10px to the full-size image CSS, it gets moved near the top-left corner of the low-quality image, allowing the browser to see it needs to be preloaded as it nears the viewport: