在Next.js中如何获取图片宽高属性并让Image组件自适应原生尺寸

Next.js 组件自动适配原生宽高的实现方案 #

Next.js的<Image>组件默认要求显式传入宽高参数是为了提前预留布局空间避免CLS（布局偏移），如果需要自动适配图片原生宽高，可以按下面两种场景处理：

本地静态图片场景 #

直接将本地图片作为模块导入后传入src属性即可，Next.js会自动读取图片的元数据获取原生宽高，无需手动定义：

import Image from 'next/image'
// 导入public目录下的静态图片
import productImg from '@/public/product.png'

export default function ProductCard() {
  // 无需手动传width、height属性
  return <Image src={productImg} alt="产品示意图" />
}

如果需要调整显示尺寸，直接给组件加className或者style属性覆盖即可，组件会自动保持图片原有比例。

远程图片场景 #

远程图片无法直接读取本地元数据，可通过fill属性省略宽高定义，配合父容器的相对定位和object-fit属性保持原生宽高比例：

import Image from 'next/image'

export default function RemoteImage() {
  return (
    // 父容器设为相对定位，宽度会自适应图片原生尺寸
    <div style={{ position: 'relative', display: 'inline-block', width: 'fit-content' }}>
      <Image
        src="https://你的远程图片地址.com/img.jpg"
        alt="远程图片示例"
        fill // 开启填充模式，无需传入width、height
        style={{ objectFit: 'contain', position: 'relative' }} 
      />
    </div>
  )
}

注意：使用远程图片前需要在next.config.js中配置对应的域名白名单，否则会触发编译报错，配置参考：

const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '你的远程图片域名.com',
        pathname: '/**',
      },
    ],
  },
}
module.exports = nextConfig

如果不需要Next.js的图片优化能力，也可以添加unoptimized属性，此时<Image>组件行为和原生<img>标签完全一致，也不需要手动定义宽高：

<Image src="图片地址" alt="说明" unoptimized />

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