Nextjs Image: was preloaded using link preload but not used within a few seconds from the window's load event

user_1635200 0
Viewed 575

i am using Nextjs react based framework, and i am trying show the logo image in Image component. this is my code: i have this folder: public/img

<Image
                src={'/img/logo.png'}
                width='154'
                height='82'
                alt='logo'
                layout='responsive'
                priority={true}
              />

i get this error in the console:

The resource http://localhost:3001/_next/image?url=%2Fimg%2Flogo.png&w=640&q=75 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

any help ?

next.js reactjs google-chrome javascript
1 Answers

Just set priority to "true" which is the equivalent of rel="preload".

Preloaded image in Html

<link rel="preload" as="image" href="image.jpg">

with next:

<Image
    src="/images/image.jpg"

    width="800"
    height="600"
    priority={true}
 />

the problem is with chrome's preload as it loads images that are not being used. But the loading is correct. No more error message for me since this small correction

Here are some sources: https://github.com/GoogleChromeLabs/preload-webpack-plugin/issues/8 https://abstack.pk/post/learn-how-to-preload-images-in-nextjs

Enjoy

user_155236900
Related