Next.js Image使用fill时的布局偏移问题及方案咨询

我希望实现的效果如下：
（展示多张高度不一但被限制最大高度的图片，在页面中整齐排列无布局偏移）

我的图片存储在第三方服务中（无法直接获取其width/height），因此使用Next.js Image组件的fill属性，代码如下：

<div className="relative max-h-96"> 
  <Image src={url} alt="" fill className="!relative object-cover" />
</div>

我知道使用fill时需要通过父元素控制尺寸，但图片是动态的，我希望它们在页面上保持原始尺寸（仅限制max-h-96），无法设置固定尺寸的父元素，此时会出现布局偏移。

问题1：面对这种图片高度不一致的情况，如何解决布局偏移问题？ #

我的计划 #

由于我完全控制图片上传流程，可以在用户上传时提前将图片width和height数据存入数据库，代码调整为：

<div className="flex max-h-96 items-center justify-center"> 
  <Image src={url} alt="" width={width} height={height} className="object-cover" />
</div>

问题2：这种做法是否过于繁琐/过度设计？ #

问题1：搞定布局偏移的办法 #

布局偏移说白了就是图片加载前容器没尺寸，加载完突然撑开页面。针对你这种高度不一的动态图片场景，有几个实用方案：

• 最靠谱的：上传时存宽高（就是你想的办法）
  既然你能控制上传流程，直接在用户传图的时候，用后端工具（比如Sharp、ImageMagick这类常用的图片处理库）读一下图片的原始宽高，存到数据库里。渲染的时候把宽高传给Image组件，组件直接就能算出要预留的空间，完美解决偏移，还能保留图片原比例，配合max-h-96限制最高高度，完全符合你的需求。

• 前端临时救急：预加载拿尺寸
  要是不想动后端，可以在组件里用原生Image对象先加载一遍图片，等加载完拿到宽高再渲染正式的Image组件。不过这种方式会有一小段时间的占位期，你可以给父元素整个灰色的骨架（比如和max-h-96同高的灰色块），避免页面跳得太厉害。大概代码是这样：

  const [imgSize, setImgSize] = useState(null);
  
  useEffect(() => {
    const tempImg = new Image();
    tempImg.src = url;
    tempImg.onload = () => {
      setImgSize({ width: tempImg.width, height: tempImg.height });
    };
  }, [url]);
  
  return (
    <div className="flex max-h-96 items-center justify-center">
      {!imgSize ? (
        <div className="w-full max-h-96 bg-gray-200 rounded" />
      ) : (
        <Image src={url} alt="" {...imgSize} className="object-cover" />
      )}
    </div>
  );
  

• 最简单的妥协：固定骨架占位
  要是嫌上面两种麻烦，直接给父元素整个max-h-96的灰色占位块，图片加载完再显示。这种方式最省事，但图片实际高度和占位高度不一样的话，还是会有一点点小偏移，不过比完全没占位强多了。

问题2：存宽高算不算过度设计？ #

绝对不算，反而很务实，理由很实在：

1. 用户体验直接拉满：彻底解决页面跳来跳去的问题，符合谷歌的核心Web指标（CLS），用户用着舒服。
2. 省性能：不用前端多加载一遍图片拿尺寸，少发请求，页面加载更快。
3. 后续能搞更多优化：存了宽高之后，后面想生成不同尺寸的缩略图、根据图片横竖版做不同布局，都能直接用这个数据，扩展性很强。
4. 实现起来没难度：上传时读宽高的逻辑超简单，后端随便找个图片处理库就能搞定，根本不麻烦。

内容的提问来源于stack exchange，提问作者Sha'an