Reputation: 55
I have a component with dynamic content like so :
<Image width="680" height="400" src={post.imgsrc} alt={post.title} />
I keep having the same error even if I have added the width/height :
Image with src "/imgs/paintings/2022/2.jpg" must use "width" and "height" properties or "layout='fill'" property.
I don't know why, and I wonder why I have to specify width and height since my pictures have different sizes...
Upvotes: 1
Views: 1364
Reputation: 4102
One thing to mention is that you can import the images if they are local, if you want that you do not need to use width, height, or fill. They get provided automatically
Example from the docs:
import profilePic from '../public/me.png'
import Image from 'next/image'
import profilePic from '../public/me.png'
function Home() {
return (
<>
<h1>My Homepage</h1>
<Image
src={profilePic}
alt="Picture of the author"
// width={500} automatically provided
// height={500} automatically provided
// blurDataURL="data:..." automatically provided
// placeholder="blur" // Optional blur-up while loading
/>
<p>Welcome to my homepage!</p>
</>
)
}
This also explains why remote images do need these properties.
Upvotes: 1