nextjs Image property null

Question

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

You need to provide numeric values: <Image width={680} height={400} .... And the reason for requiring them is to prevent cumulative layout shift. — tromgy
– tromgy, Commented Feb 8, 2022 at 12:45

utdev · Accepted Answer · 2022-02-08 13:29:50Z

1

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.

answered Feb 8, 2022 at 13:29

utdev

4,11210 gold badges42 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Warry Over a year ago

Thank you very much, I get it now, I used the import method and it's working.

Collectives™ on Stack Overflow

nextjs Image property null

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related