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

Question

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 ?

Calves

Can you show us the HTML code generated for that Image component in the DOM? What src value does it have? – Erosive

Also getting this with next/image even with priority set to true – Oblige

@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. – Electuary

I've created an issue on github, also you can try this temp fix. – Egregious

Answer 1

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.

Egregious

this has nothing to do with the question, don't know why this is marked as the accepted answer. – Cultivator

@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. – Desiccant

Answer 2

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

Blindheim

Guessing this will be why remote images also show this error in dev mode, as the path gets converted to a locally cached image. - Seems safe to ignore in this context. – Mammillate

This solution fixed the issue for me in Next JS 14.0.4. No other answers helped. – Subdebutante

Answer 3

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

Alephnull

Answer 4

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

Daugava

OP is already using priority={true} on the Image component. – Erosive

Answer 5

I had a similar error message where the file in question was a font from Google. It worked fine on my local machine but when I deployed it to a kubernetes pod I got errors. In my case I had a kubernetes ingress controller in front I had to reconfigure path:

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress-route
  annotations:
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    cert-manager.io/cluster-issuer: "letsencrypt-prod"
spec:
  tls:
  - hosts:
    - "foo.bar.baz"
    secretName: tls-secret
  rules:
  - host: "foo.bar.baz"
    http:
      paths:
        - pathType: Prefix
          path: "/(|$)(.*)"
          backend:
            service:
              name: web-service
              port:
                number: 3000

Dolomites