如何设置 Next js Image 与原始图像中的高度相同？

Posted 2023-03-06

【中文标题】如何设置 Next js Image 与原始图像中的高度相同？

【英文标题】：How to set Next js Image with and height the same like in the original image?

【发布时间】：2021-12-08 10:29:41

【问题描述】：

我正在尝试创建一个具有类似砌体布局的图片库。这意味着布局包含几列，并且具有相同的宽度和列数取决于当前视口宽度。每个项目的高度是灵活的，取决于将在特定画廊项目中呈现的图像。所以item wrapper对高度没有任何限制，但宽度是有限的

之前我为每个画廊项目使用简单的img 标签来渲染图像

<img src=src alt=description />

它以与原始图像相同的宽度和高度呈现自己，这正是我想要的，因为它以各种高度呈现自己，因此砌体布局可以正常工作。

到目前为止一切顺利，但我想使用 Next.js Image 组件，因为它有很多不错的功能，例如延迟加载、加载模糊占位符等。但是我不知道如何实现相同的功能与标准 img 用例中的行为相同。 我不能将layout="fill" 与width & height = 100% 一起使用，因为该项目的父容器没有任何高度

<Image
   
  layout="fill"  
  src=src
  
/>

图像本身必须是父容器的“height-dictator”，而且我不能使用直接 with/height 值设置到 Image 组件中，因为这些属性对于每个图像都是未知的

所以我想知道在 Next.js Image 组件的情况下是否有可能实现这种行为？

我将不胜感激任何帮助和信息！

【问题讨论】：

***.com/a/69344756/11613622

嗨@brc-dd 我检查了它，但它在我的情况下不起作用，因为我不知道每个图像的高度，所以我想知道使用自动渲染图像的相同可能性它的自然高度就像标准的img html 标签一样

【参考方案1】：

next/image 组件中的宽度和高度应该是没有单位的整数。它们是像素。 layout="fill" 是另一回事。如果这是您唯一的可能性，可以使用 JS 计算 width 和 height 属性。

这里有一些很酷的方法来处理这个问题： How to get image size (height & width) using javascript?

您所要做的就是在将图像附加到图像组件之前运行计算。

您要查找的是图像的 naturalWidth 和 naturalHeight。

【讨论】：

嗨@Bartek B。因此，据我了解，不可能实现与普通img HTML 标记相同的行为。 Gush，很遗憾我必须手动完成。谢谢你的回答

实际上正如评论中提到的 brc-dd 可能根本不需要这样做。但是，如果您想对其进行 100% 控制，那应该是可以实现的。 //更新哦...看到你的评论

不幸的是，这种方法行不通。我已经试过了。没有layout="fill" Next.js 会抛出错误 Error: Image with src ... must use "width" and "height" properties or "layout='fill'" property. 如果我设置layout="fill" 属性它刚刚开始填充关于 父容器 宽度/高度的图像，并且它不好，因为父容器没有任何高度。图片本身应该决定父容器的高度