Next.js（React框架）图片加载问题：无需width/height属性如何解决？

问题原因 #

你遇到的问题核心有两点：

1. 图片路径错误：Next.js的public目录是静态资源根目录，引用时无需写/../public/，直接从根路径开始即可。
2. layout="fill"的依赖条件未满足：该属性要求图片的父容器必须设置position: relative，同时父容器要有明确的尺寸（或通过布局逻辑占据空间），否则图片会脱离文档流，无法在页面上呈现。

解决方案 #

1. 修正图片路径

将src="/../public/img/services-02.jpg"改为src="/img/services-02.jpg"。

2. 给父容器添加定位和尺寸

通过父容器控制图片的显示范围，无需给Image组件本身设置width/height：

示例代码（内联样式）：

<div style={{ position: 'relative', width: '100%', height: '200px' }}>
  <Image
    src="/img/services-02.jpg"
    className="card-img object-cover"
    alt="Card image"
    layout="fill"
  />
</div>

示例代码（CSS类）：

/* 父容器样式 */
.card-img-wrapper {
  position: relative;
  width: 100%;
  min-height: 250px; /* 根据布局需求调整 */
}

/* 图片样式，保持比例填充容器 */
.card-img {
  object-fit: cover;
}

<div className="card-img-wrapper">
  <Image
    src="/img/services-02.jpg"
    className="card-img"
    alt="Card image"
    layout="fill"
  />
</div>

补充说明 #

• object-fit: cover可让图片保持原有比例填充父容器，避免拉伸变形，你可根据需求换成contain等其他值。
• 若使用Next.js 13+的App Router，Image组件的layout="fill"已替换为fill={true}，但核心逻辑仍依赖父容器的相对定位。

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