Next.js 14 Image组件设height:auto仍报尺寸错误求解决

问题分析 #

你遇到的错误源于Next.js Image组件的校验逻辑：当你通过style修改了其中一个维度（这里是width: 300px），但组件本身的width/height属性被设为0时，即便你添加了height: auto，组件仍会判定你只修改了单一维度，触发报错。

解决方案 #

方案1：传入图片实际原始宽高，配合style调整尺寸

给Image组件传入图片真实的宽高数值（比如你的图片实际是600px宽、400px高），再通过style固定宽度并让高度自适应：

{projects.map((project, i) => {
  return (
    <Image
      key={i}
      src={`/images/${project.src}`}
      alt={project.title}
      width={600} // 替换为图片实际宽度
      height={400} // 替换为图片实际高度
      sizes="300px"
      style={{ width: "300px", height: "auto" }}
      unoptimized
    />
  );
})}

组件有了原始宽高作为基准后，style里的height: auto就能正确触发比例保持逻辑，不会再触发校验错误。

方案2：使用fill模式结合容器控制尺寸

如果不想手动传入图片原始宽高，可以用fill属性，配合相对定位的容器来控制图片尺寸：

{projects.map((project, i) => {
  return (
    <div key={i} style={{ width: "300px", position: "relative", aspectRatio: "3/2" }}>
      <Image
        src={`/images/${project.src}`}
        alt={project.title}
        fill
        sizes="300px"
        style={{ objectFit: "contain" }} // 可选：用contain/cover调整图片适配方式
        unoptimized
      />
    </div>
  );
})}

• 容器的aspectRatio可根据图片实际比例设置（比如3/2、16/9），不需要固定比例的话可以直接删除该属性
• objectFit用于控制图片在容器内的显示效果，按需选择即可

方案3：禁用严格尺寸校验（不推荐）

如果必须保留width="0"/height="0"的设置，可以在next.config.js中关闭Image组件的严格尺寸校验：

// next.config.js
module.exports = {
  images: {
    strictImageSize: false,
  },
};

注意：该方案会关闭组件的尺寸校验逻辑，可能引发潜在布局问题，仅建议在特殊场景下使用。

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