解决 Next.js Image 组件加载导致 layout shift 的问题 / Fixing Layout Shift Caused by Next.js Image Loading

全速奔跑

🧩 问题描述 / Problem

在使用 flex flex-col 布局时，我遇到了一个明显的 layout shift（布局跳动）问题：
当页面加载 <Image /> 组件时，初始时容器高度较小，但图片加载完成后高度被撑大，导致整体布局被“顶开”，体验很不流畅。

❗️This is a common issue when using <Image /> inside a flex flex-col container — the image loads slowly and pushes surrounding content downward, causing layout shift.

🎯 目标 / Goals

• ✅ 页面加载前不跳动（防 CLS） cumulative layout shift

• ✅ 图片自适应（responsive）

• ✅ 支持骨架屏（Skeleton）显示

🔍 原因分析 / Why This Happens

• <Image /> 组件未设定父容器的高度或比例时，浏览器在图片加载完成前无法预估尺寸。

• flex-col 容器的高度是由内容决定的，因此图片一加载，立刻“撑大”父容器，导致跳动。

✅ 解决方案 / Solution

关键做法：使用一个 div 包裹 <Image />，设置固定比例，提前占位空间。

<div className="relative w-full aspect-[1/1] overflow-hidden">
  <Image
    src={item.image}
    alt={item.name}
    fill
    className="object-contain self-center"
    priority
  />
</div>

• relative: 给父容器定位，配合 Image fill 使用

• aspect-[1/1]: 保持宽高比（这里是正方形）

• overflow-hidden: 防止内容溢出

• object-contain self-center: 保证图片不被拉伸，居中显示

🦴 添加骨架屏 / Add Skeleton Placeholder

<div className="relative w-full aspect-[1/1] overflow-hidden">
    <Skeleton className="absolute inset-0 w-full h-full" />
</div>

 

来源：https://www.cnblogs.com/sabertobih/p/18934400