Theo's Typesafe Cult•2y ago

How to trigger NextJS Image fetch again if not loaded in 3 seconds

Hi, I'm fetching images from an unreliable gateway that sometimes require multiple tries (same URL) to load the image. Is there a way using Next Image/Future Image to trigger a fetch from the same src link again if it is still loading after 3 seconds or if the load has failed? Thanks for your help!

8 Replies

Unknown User•2y ago

Message Not Public

Bryan3•2y ago

Thanks for the suggestion! For 5) how would I set a new key on the Image component? Would it be something like this?

<FutureImage
              key={newKey}
              src={imageURL}
              alt={imageName}
              width={imageSize}
              height={imageSize}
            />

<FutureImage
              key={newKey}
              src={imageURL}
              alt={imageName}
              width={imageSize}
              height={imageSize}
            />

Where newKey is something like a string timestamp?

Unknown User•2y ago

Message Not Public

Bryan3•2y ago

Got it, will try it out! Thanks for your help! Everything is loading now. One thing I've found is that the page sometimes stutters when a lot of images are being loaded so scrolling becomes jittery as the images are loading. Is this a limitation due to Javascript being single threaded and is there a way around the issue? (I think Next Image lazy loads by default but there are 10-20 images in the viewport at a given time so the default handling might not be enough)

Unknown User•2y ago

Message Not Public

Bryan3•2y ago

Seems like I found what might be the issue. Even though I'm using Next FutureImage it is not lazy loading by default and instead tries to load the images all at once Not sure why that's happening but this is the image component

    <FutureImage
      key={`${loadCount}`}
      src={imageURL}
      loader={({ src }) => src}
      alt="Image"
      width={imageSize}
      height={imageSize}
      // onError={() => retryLoadOnError()}
      // onLoadingComplete={() => clearMyTimeOut()}
    />

    <FutureImage
      key={`${loadCount}`}
      src={imageURL}
      loader={({ src }) => src}
      alt="Image"
      width={imageSize}
      height={imageSize}
      // onError={() => retryLoadOnError()}
      // onLoadingComplete={() => clearMyTimeOut()}
    />

I added a custom loader just to use the lazy loading features following this thread

Bryan3•2y ago

https://github.com/vercel/next.js/discussions/37186

GitHub

Just need to lazy load images. No optimization required. Can I use ...

I want to use next/image to display the Open Graph image of 3rd party websites. The URLs for these images is only known at runtime, not before that, so the domains cannot be pre-configured. I don&a...

Bryan3•2y ago

But the console is giving me the following warning:

Image with src "..." has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.
Read more: https://nextjs.org/docs/messages/next-image-missing-loader-width

Image with src "..." has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.
Read more: https://nextjs.org/docs/messages/next-image-missing-loader-width

not sure if the warning is actually preventing the FutureImage to be lazy loaded

Gaming

Programming

How to trigger NextJS Image fetch again if not loaded in 3 seconds