Bryan3 Comments - Answer Overflow

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

15 replies

TTCTheo's Typesafe Cult

•Created by Bryan3 on 11/19/2022 in #questions

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

But the console is giving me the following warning:

15 replies

TTCTheo's Typesafe Cult

•Created by Bryan3 on 11/19/2022 in #questions

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

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

15 replies

TTCTheo's Typesafe Cult

•Created by Bryan3 on 11/19/2022 in #questions

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

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

15 replies

TTCTheo's Typesafe Cult

•Created by Bryan3 on 11/19/2022 in #questions

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

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()}
    />

15 replies

TTCTheo's Typesafe Cult

•Created by Bryan3 on 11/19/2022 in #questions

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

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

15 replies

TTCTheo's Typesafe Cult

•Created by Bryan3 on 11/19/2022 in #questions

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

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)

15 replies

TTCTheo's Typesafe Cult

•Created by Bryan3 on 11/19/2022 in #questions

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

Got it, will try it out!

15 replies

TTCTheo's Typesafe Cult

•Created by Bryan3 on 11/19/2022 in #questions

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

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?

15 replies

Gaming

Programming