如何在nextjs中删除此此图像背景

gkn4icbw 于 2023-04-20 发布在其他

关注(0)|答案(1)|浏览(143)

此图像已添加，但在 Nextjs 中渲染时，它会自动添加额外的内容。

<div className="flex flex-col items-start justify-start rounded-3xl p-4 bg-boxi w-1/3">
  <div className="mb-4">
    <Image
      src={ProfilePic}
      alt=""
      className="w-1/2 h-auto hover:drop-shadow-image"
    />
  </div>
  <div className="w-full flex flex-col items-start">
    <p className="text-lg font-semibold text-light mb-1">------</p>
    <p className="text-base font-medium text-light mb-1">-------</p>
    <p className="text-sm font-medium text-light">example@gmail.com</p>
  </div>
</div>

这是div里面的代码，我只需要图像，不需要额外的方块内容。

next.js

来源：https://stackoverflow.com/questions/76003786/how-to-remove-this-this-image-background-in-nextjs

1条答案

按热度按时间

ivqmmu1c1#

Next/Image
这个next/image组件使用浏览器本机延迟加载
这是 SEO 的良好实践，旨在防止 * CLS（累积布局偏移）*，因此需要提供明确的宽度和高度属性以进行布局管理。示例：

<Image
    src={ProfilePic}
    alt=""
    width={500}
    height={500}
    className="w-1/2 h-auto hover:drop-shadow-image"
/>

或者，这种情况下的另一种方法是将这些大小属性提升到它们的容器中。

<div class="container relative h-10 w-10">
    <Image
        src={ProfilePic}
        alt=""
        fill
        size"30vw" 
        className="object-contain hover:drop-shadow-image"
    />
</div>

有关此方法的更多信息，请参阅填充和尺寸。
在您的例子中，可以呈现的布局可能基于您提供的html组件的其他更高的容器，这些容器具有显式的大小属性。因此，您可以更改为上面的方法以进行干净的布局管理。

赞(0）回复(0）举报 2023-04-20

我来回答

如何在nextjs中删除此此图像背景

1条答案

相关问题

热门标签

最新问答