javascriptreactjsgoogle-chromenext.jsnext-images

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


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 ?


Solution

  • 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.