使用 <Image /> 标签时如何在 Next.js 中删除移动视图中的空白？

Posted 2023-03-06

【中文标题】使用 <Image /> 标签时如何在 Next.js 中删除移动视图中的空白？

【英文标题】：How to remove white space in mobile view in Next.js while using <Image /> tag?

【发布时间】：2021-11-15 00:04:36

【问题描述】：

我正在 Next.js 中创建一个网站。我使用<Image /> 标签将图像放置在网站中。 我只在移动视图中在图像组件中得到一些空白，但在桌面上它很好，当我签入网络标签时，我得到了 svg+xml 这样的文件<img alt aria-hidden="true" src='data:image/svg+xml base 64'>。 我认为这个svg+xml 在图像中创建了空白？ 谁能帮我这个？ 如何删除此 svg+xml 文件？

这是我用于图像的 html 代码：

 <div className=styles.card>
  <div className=styles.content>
    <div className=styles.image>
      <Image
        src=image2
        
        width=88
        height=88
       
        layout="intrinsic"
        quality=100
      />
    </div>
    <h3>title</h3>
    <p>description</p>
  </div>
</div>

scss：

scss code image

当我在显示this的移动视图中长按空白时

当我使用<img /> 标记用于图像目的时，这个空白不会出现，只有当我使用这个 nextjs <Image /> 标记时，我才会得到空白

【问题讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【参考方案1】：

img  
   object-fit: cover; 

如果你添加这个图片会覆盖整个区域，但是它会裁剪图片的一部分，你也可以尝试给它作为背景图片，并给背景大小覆盖，

出现问题是因为您使用图像的高度和宽度，图像只会在与其分辨率相关的情况下可见，

所以也尝试为图像提供 100% 的宽度（为图像的外部容器提供固定宽度）而不为图像提供高度（同时为图像容器提供最大高度并溢出：隐藏）

【参考方案2】：

空白很可能是由于在Image 标签上设置了placeholder 属性。当您使用此道具时，Nextjs 会自动插入一个 svg 元素，如果您检查图像，您可以在 demo 中看到。

您可以执行以下操作

如果您使用的是动态图像，则需要将 url 显式传递给 blurDataURL 属性。如果您使用的是静态图片，则无需提供任何内容。 如果你不需要占位符，你可以省略这个属性，让它默认为empty。 如果你没有设置placeholder 属性，可能是因为css冲突。尝试从 .scss 文件中删除任何 css 样式的图像，并使用 Nextjs Image 中的样式属性