18

I am using Nextjs ,a React-based framework, and i am trying show the logo.png image in Image component which is provided by Next.js.

I have this folder: public/img

and this is my code:

<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 ?

zahra shahrouzi
  • 862
  • 7
  • 18
michael
  • 847
  • 4
  • 10
  • 17
  • 1
    Can you show us the HTML code generated for that `Image` component in the DOM? What `src` value does it have? – juliomalves Aug 20 '22 at 16:03
  • 4
    Also getting this with next/image even with priority set to `true` – John E Oct 20 '22 at 09:42
  • 2
    @JohnE the problem is exactly with setting `priority={true}` bc that's when next.js adds corresponding preload link. if you don't use that image immediately or it's not above the fold then you'll face this error. – zahra shahrouzi Dec 18 '22 at 09:39
  • I've created an issue on [github](https://github.com/vercel/next.js/issues/44556#issuecomment-1370482896), also you can try this temp [fix](https://stackoverflow.com/a/74713414/12490386). – Chukwuemeka Maduekwe Jan 04 '23 at 04:46

4 Answers4

4

Adding 'placeholder' and 'blurDataURL' props to Next Image and removing 'priority' prop, helped resolved this issue

<Image
  src={'/img/logo.png'}
  width='154'
  height='82'
  alt='logo'
  placeholder="blur"
  blurDataURL={'/img/logo.png'}
/>

I removed the layout tag, as I'm using Next.js version 13.1.1

If the above didn't work, make sure you're passing the sizes props

sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

Read more from the docs

A string that provides information about how wide the image will be at different breakpoints. The value of sizes will greatly affect performance for images using fill or which are styled to have a responsive size

For example, if you know your styling will cause an image to be full-width on mobile devices, in a 2-column layout on tablets, and a 3-column layout on desktop displays, you should include a sizes property such as the following:

import Image from 'next/image'
const Example = () => (
  <div className="grid-element">
    <Image
      src="/example.png"
      fill
      sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
    />
  </div>
)

This example sizes could have a dramatic effect on performance metrics. Without the 33vw sizes, the image selected from the server would be 3 times as wide as it needs to be. Because file size is proportional to the square of the width, without sizes the user would download an image that's 9 times larger than necessary.

Chukwuemeka Maduekwe
  • 6,687
  • 5
  • 44
  • 67
  • 8
    this has nothing to do with the question, don't know why this is marked as the accepted answer. – Dremiq Dec 12 '22 at 18:41
  • @Dremiq, I agree that this answer seems a bit tangential to the question at hand. However, removing the `priority={true}` attribute is what will make the warning go away in this case, since it will not preload the images in that case. The blurring of the images on initial load is just a better UX than a blank image placeholder. – ThePuzzleMaster May 09 '23 at 21:27
2

If you're using the into a link just add as='image' like this

<Link href="/" as={'image'}>
              <Image
                priority={true}
                src="/images/profile.jpg"
                className={utilStyles.borderCircle}
                height={108}
                width={108}
                alt=""
              />
            </Link>

Just add as='image', that solves for me

D3press3d
  • 21
  • 2
1

The thing that fixed this for me is actually hinted in the Next.js Image Github.

It will not work if you try to put the actual source path as the value for src.

In order to use a src, you need to import it:

import frank from '/public/frank-banner.png';

So that when you actually use it in the Image component:

<Image src={frank} width={xx} height={xx}/>
internetdrew
  • 29
  • 3
0

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

emerson
  • 35
  • 4