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 ?
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
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
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.