如何在Next.js 13中不指定width和height使用next/image组件？

你遇到的问题源于Next.js 13对Image组件的重大调整，原写法不符合新版本的API规范，具体修正如下：

1. 替换废弃的layout="fill"属性 #

Next.js 13移除了Image组件的layout属性，改用fill={true}布尔值属性启用填充模式，这是触发报错的核心原因。

2. 给父容器添加相对定位 #

使用fill模式时，Image组件需要一个设置了position: relative的父容器来确定填充范围，否则无法正确渲染尺寸。

修正后的完整代码 #

import Image from 'next/image'

const Index = () => {
  return (
    <div className="relative w-48 aspect-square md:w-72 xl:w-48">
      <Image
        src="https://picsum.photos/800/600"
        fill={true}
        alt="示例图片"
        className="object-cover" // 可选，避免图片拉伸变形
      />
    </div>
  )
}

export default Index

补充注意事项 #

• alt属性为必填项：Next.js 13的Image组件强制要求设置该属性（若无需可添加aria-hidden="true"替代），否则会触发额外警告。
• object-cover类：用于控制图片按比例填充容器，可根据实际需求选择是否保留。

内容的提问来源于stack exchange，提问作者Big boy