CODEWITHSUNDEEP
next.js
Warry
Warry

Reputation: 55

nextjs Image property null

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

Answers (1)

utdev
utdev

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

Related Questions