如何使用Next.js <Image />组件配置100%宽高的图片？

Next.js 升级后组件适配100%宽高的正确配置 #

针对你遇到的两个错误，直接给出修复方案和代码示例：

错误原因说明 #

1. objectFit 已不再作为<Image>组件的直接props，需通过style属性传入
2. width/height仅接受数值类型，不能传百分比字符串，要实现自适应容器宽高需改用fill属性

正确代码示例 #

// import Image from 'next/image'
<div style={{ ...styles.slide, ...style, position: 'relative' }} key={key}>
  <Image
    src={src}
    alt=""
    fill
    style={{ objectFit: 'cover' }}
    sizes="100vw" // 根据你的实际布局场景调整，可选
  />
</div>

关键配置说明 #

• 父容器必须设置position: relative：因为fill会让<Image>组件相对于父容器做绝对定位，才能占满容器空间
• fill属性：自动让图片填充父容器的宽高，无需手动设置width和height
• objectFit: 'cover'：移到style对象中配置，实现原有的图片裁剪填充效果
• sizes属性：可选配置，用于告知浏览器不同屏幕尺寸下图片的显示尺寸，优化图片加载性能

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