如何在不提供宽度和高度的情况下使用 next.js 13 图像？

Question

Next.js 13 已发布。重构的组件之一是next/image.

我想使用它，但我想使用顺风设置图像大小。

这是我的代码：

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>
   )
}

我收到此错误：

错误：src“https://picsum.photos/800/600”的图像缺少必需的“width”属性。

但是，在文档中据说可以fill在不指定width和 的情况下使用height。

我在这里想念什么？

Answer 1

Next.js v13 新图像组件接收一个fill布尔值的 prop，而不是旧的layoutprop。例子：

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

style此外，您现在可以使用或 来设置组件的底层图像元素的样式className。

使用 Tailwind CSS 的示例：

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