Next.js <Image/>组件与<img/>标签表现不一致问题及解决方法

Next.js

return (<Image/>)

组件与原生标签显示差异问题及解决方法 #

问题现象 #

学习Next.js教程时，使用Next.js提供的<Image/>组件添加图片，显示效果不符合预期；改用原生<img/>标签则能正常显示目标效果。

return (<Image/>)

组件代码及效果 #

<Image
  src="https://links.papareact.com/f90"
  width={150}
  height={40}
  style={{ objectFit: "contain" }}
  className="cursor-pointer"
  alt="amazon logo"
/>

显示效果：

原生标签代码及效果 #

<img
  src="https://links.papareact.com/f90"
  style={{ objectFit: "contain", width: "150px", height: "40px" }}
  className="cursor-pointer"
  alt="amazon logo"
/>

显示效果：

差异原因 #

1. 布局逻辑差异：Next.js的<Image/>组件为图片性能优化设计，默认会根据传入的width和height计算图片固有比例，而非直接设置元素显示尺寸。默认布局模式下（如Pages Router的layout="responsive"），图片会自适应容器宽度，高度按比例缩放，导致objectFit: contain无法像原生img那样作用于固定尺寸元素。
2. 容器包裹机制：<Image/>组件会自动生成容器包裹图片，默认容器样式可能干扰objectFit效果；而原生<img/>直接渲染图片元素，样式直接作用于自身。

解决方法 #

根据使用的Next.js版本选择对应调整方式：

方式一：Next.js 12及更早版本（Pages Router） #

设置layout="fixed"，让<Image/>组件以传入的width和height作为实际显示尺寸，此时objectFit可正常生效：

<Image
  src="https://links.papareact.com/f90"
  width={150}
  height={40}
  layout="fixed"
  style={{ objectFit: "contain" }}
  className="cursor-pointer"
  alt="amazon logo"
/>

方式二：Next.js 13+版本（App Router） #

App Router的<Image/>组件调整了props逻辑，需在style中明确设置宽高，配合传入的width和height作为固有尺寸，确保objectFit生效：

<Image
  src="https://links.papareact.com/f90"
  width={150}
  height={40}
  style={{ width: "150px", height: "40px", objectFit: "contain" }}
  className="cursor-pointer"
  alt="amazon logo"
/>

注意：你原代码中width:{150}是语法错误，正确写法为width={150}（去掉冒号），这也可能是显示异常的原因之一。

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