使用Next.js的<Image/>标签时移动端出现留白如何解决？

你看到的data:image/svg+xml base64格式的文件是Next.js旧版Image组件的默认透明占位图，作用是提前占据图片位置避免布局偏移，移动端出现多余留白是该占位图的默认渲染样式和父容器样式不兼容导致。

• 方案1：直接移除SVG占位图
  给<Image/>组件添加placeholder="empty"属性，即可禁用占位图渲染，从根源避免该问题，修改后代码如下：

<div className={styles.card}>
  <div className={styles.content}>
    <div className={styles.image}>
      <Image
        src={image2}
        alt="picture"
        width={88}
        height={88}
        layout="intrinsic"
        quality={100}
        placeholder="empty" // 新增该行
      />
    </div>
    <h3>{title}</h3>
    <p>{description}</p>
  </div>
</div>

• 方案2：修复父容器样式兼容问题
  给包裹Image组件的.image容器添加如下样式，消除内联元素默认行高带来的留白：

.image {
  width: 88px;
  height: 88px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  // 保留你原有的其他样式
}

• 方案3：适配固定尺寸场景
  因为你的图片宽高是固定的88px，可以将layout="intrinsic"修改为layout="fixed"，让占位图严格匹配设置的宽高，不会出现尺寸溢出留白。

修改后刷新页面，浏览器元素面板中不会再出现aria-hidden="true"的svg占位img标签，移动端多余留白即可消失。

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