Next.js Image组件layout='fill'在瀑布流列表中无法渲染问题

问题根因 #

layout="fill"的Next.js Image组件会完全撑满第一个position属性不为static的父级容器，你当前的问题出在：

• 你的ImageListItem父容器虽然设置了position: relative，但它的高度为auto，且没有任何内容撑开高度，容器实际高度为0，因此fill模式的图片没有渲染空间，自然无法展示。
• 原生img标签可以正常显示是因为你给它设置了宽高100%，img本身的内容会自动把父容器撑开。

解决方案 #

你已经拿到了CMS返回的图片宽高参数，使用padding-top百分比占位的方案是完全可行的，该方案利用「padding百分比基于父元素宽度计算」的特性，可以按图片原始宽高比提前撑开容器，完全避免布局偏移，同时适配fill模式的Image组件要求。

你的示例代码逻辑是正确的，各部分作用解释：

1. 内层Box通过pt: ${100 / (image.width! / image.height!)}%`` 按图片宽高比撑开容器高度，容器比例和图片原始比例完全一致
2. 外层figure容器设置position: absolute + inset: 0，完全撑满被padding撑开的父容器，为Image组件提供定位上下文
3. Image组件设置layout="fill" + objectFit="cover"，就可以按比例撑满容器正常渲染，同时保留模糊占位的效果。

兼容提示 #

如果你使用的是Next.js 13+ App Router版本的新版next/image组件，layout属性已被弃用，直接替换为fill布尔属性即可，其余逻辑完全一致：

<Image
  src={image.src}
  alt={image.alt}
  blurDataURL={image.blurDataURL}
  placeholder="blur"
  fill
  objectFit="cover"
/>

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