如何使用next/image实现不同尺寸图片的响应式适配？

以下方案无需提前编写函数检测单张图片尺寸：

方案1：本地静态资源自动读取宽高 #

如果图片为存放在项目public目录下的静态资源，可直接通过import引入，Next.js会自动识别图片原始宽高，无需手动填写固定值，配合layout="responsive"即可实现按原图比例的响应式展示。
代码示例：

// 提前导入对应静态图片
import ProductImg from '../public/images/product.png'
import BannerImg from '../public/images/banner.jpg'

// 组件内使用，无需手动传width、height参数
<Image 
  src={ProductImg} 
  layout="responsive" 
  alt="产品展示" 
/>

方案2：动态/远程图片绕过宽高校验 #

如果是动态路径图片、远程拉取的未知尺寸图片，可以使用layout="raw"+unoptimized配置，跳过Next.js对宽高的强制校验，通过自定义CSS实现响应式：

<div style={{ width: '100%' }}>
  <Image
    src={`/images/${image}`}
    layout="raw"
    unoptimized
    alt="图片描述"
    style={{ width: '100%', height: 'auto' }}
  />
</div>

该方案下图片会自动适配父容器宽度，高度按原图原始比例自适应，可兼容任意尺寸的图片。

补充说明 #

• 若使用的Next.js 12版本低于12.1，不支持layout="raw"属性，可直接使用原生<img>标签实现，Next.js 12允许项目内混用原生img与next/image组件
• 开启unoptimized后图片会跳过Next.js自带的压缩、格式转换优化能力，若需要保留优化能力，建议将图片宽高数据提前存入后端接口字段，请求时直接获取使用即可

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