css - 使用标签时如何在 Next.js 中删除移动视图中的空白？

Question

我正在 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}
        alt="picture"
        width={88}
        height={88}
       
        layout="intrinsic"
        quality={100}
      />
    </div>
    <h3>{title}</h3>
    <p>{description}</p>
  </div>
</div>

scss：

scss代码图片

当我长按移动视图中的空白时显示这个

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

Answer 1

空白很可能是由于标签placeholder上的道具设置引起的。Image当你使用这个道具时，Nextjs 会自动插入一个 svg 元素，如果你检查图像 ，你可以在演示中看到。

您可以执行以下操作

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

Answer 2

img { 
   object-fit: cover; 
}

如果添加此图像将覆盖整个区域，但它会裁剪图像的某些部分，您也可以尝试将其作为背景图像，并提供背景大小覆盖，

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

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

Answer 3

这就是我所做的：

// Fix Next.js images
span[style^="box-sizing:border-box;display:inline-block"] {
  display: block !important;
}

老实说，这是一个 hack，但 Next 的实现也是一个 hack。