How can I use next.js 13 image without providing width and height?

Question

Next.js 13 is out. One of the refactored components is next/image.

I want to use it, but I want to set the image size using tailwind.

Here's my code:

import Image from 'next/image'

const Index = () => {
   return (
       <div>
           <Image
               src="https://picsum.photos/800/600"
               layout="fill"
               className="w-48 aspect-square md:w-72 xl:w-48"
           />
       </div>
   )
}

And I get this error:

Error: Image with src "https://picsum.photos/800/600" is missing required "width" property.

However, in docs it's said that it's possible to use fill without specifying the width and height.

What do I miss here?

Answer 1

Next.js v13 new image component receives a fill prop which is a boolean instead of the old layout prop. Example:

<Image
  src="https://picsum.photos/800/600"
  fill
  ...
/>

Also, you can now style the component's underlying image element using style or className.

Example using Tailwind CSS:

<Image
  src="some-image-url"
  width="0"
  height="0"
  sizes="100vw"
  className="w-full h-auto"
/>