我正在尝试创建一个具有类似砌体布局的图片库。这意味着布局包含几个列，并且具有相同的宽度和列的数量取决于当前的视口宽度。每个项目的高度是灵活的，并且取决于将在特定图库项目中呈现的图像。项目包装器对高度没有限制但对宽度有限制
之前，我使用简单的img标签来渲染每个图库项目的图像
<img src={src} alt={description} />
，它以与原始图像相同的宽度和高度呈现自己，这正是我想要的，因为它以各种高度呈现自己，因此砌体布局应该工作。
到目前为止还不错，但我想使用Next.js图像组件，因为它有很多很好的功能，如延迟加载，加载模糊占位符等，但我不知道如何实现与标准img用例相同的行为。
我不能使用layout="fill"和width & height = 100%，因为该项目的父容器没有任何高度
<Image
width="100%" height="100%"
layout="fill"
src={src}
alt="Picture of the item"
/>
图片本身必须为"height- dictatorship";我也不能使用直接的with/height值来设置到Image组件中因为这些属性对于每个图像
都是未知的所以我想知道是否有可能在Next.js图像组件的情况下实现这种行为?
我很感激任何帮助&信息!
next/image组件的宽度和高度应该是不带单位的整数。它们是像素。布局="fill"那是另一回事了。宽度和高度属性可以使用JS计算，如果这是你唯一的可能性。
这里有一些很酷的方法来处理这个问题:如何获取图像大小(高度&宽度)使用JavaScript?您所要做的就是在将图像附加到image组件之前运行计算。
您要查找的是图像的自然宽度和自然高度。