如何在Next.js中使用未知宽度和高度的Image组件

如何解决如何在Next.js中使用未知宽度和高度的Image组件

从版本 10 开始，Next.js 带有内置的 Image 组件，该组件提供图像优化和响应式调整图像大小的功能。我非常喜欢它，并且一直在我的网站上使用它来处理固定大小的图像。根据官方文档，宽度和高度是必需的道具，除非是为 layout=fill。

现在，即使我不知道宽度和高度，我也想使用 Image 组件。我有来自 CMS 的博客资源，其中图像的确切大小未知。在这种情况下，有什么办法可以使用 Image 组件吗？

任何帮助将不胜感激。

解决方法

是的，您可以将它与您提到的 layout=fill 选项一起使用。

在这种情况下，您需要为图像设置“纵横比”

<div style={{ position: "relative",width: "100%",paddingBottom: "20%" }} >
  <Image
    alt="Image Alt"
    src="/image.jpg"
    layout="fill"
    objectFit="contain" // Scale your image down to fit into the container
  />
</div>

您也可以使用 objectFit="cover"，它会放大您的图像以填满所有容器。

这种方法的缺点是会附加到您指定的 width 上，它可以是相对的，例如“100%”或绝对的，例如“10rem”，但无法根据图像大小设置自动宽度和高度，或者至少现在没有。