Reactjs 如何使用next.js中的next/image渲染未知维度的图像？

这是我的用例：

• 我将在博客文章中添加图像
• 我无法设置固定尺寸来渲染这些图像，因为每个图像可能具有唯一的比例
• 例如：我可能会上传一张400 x 400的正方形图像或一张400 x 200的矩形图像

发件人：

要渲染图像，

next/image

要求您通过直接在

元素上设置或在父元素上设置来定义尺寸。这很好，因为它可以防止在图像的加载阶段发生任何布局变化

但由于每个图像都有自己的维度，我可以对每个图像使用相同的维度

这是我需要的结果

我怎样才能做到这一点

我目前的想法是：

当我上传图像时，我还必须保存它的尺寸。在开始使用

next/image

之前，我只需保存图像

src

。现在，我必须保存以下内容：

post: {
  images: [
    { 
      src: "https://.../image1.jpeg",
      width: X,                          // SHOULD SAVE WIDTH
      height: Y                          // AND HEIGHT
    }
  ]
}

所以我可以这样渲染它：

const image = post.images[0];

return(
  <Image
    src={image.src}
    width={image.width}
    height={image.height}
  />
);

const image=post.images[0]；
返回(
);

---

应该这样做吗？有更简单的解决方法吗？

我在问题中描述的方法正是我最终要做的

我创建此函数是为了在上载之前读取图像尺寸：

type ImageDimensions = {
  width: number,
  height: number
}

export const getImageDimensions = (file: File) : Promise<ImageDimensions> => {
  return new Promise((resolve,reject) => {
    try {
      const url = URL.createObjectURL(file);
      const img = new Image;
        img.onload = () => {
        const { width, height } = img;
        URL.revokeObjectURL(img.src);
        if (width && height) 
          resolve({ width, height });
        else 
          reject(new Error("Missing image dimensions"));
      };
      img.src=url;
    }
    catch(err) {
      console.error(err);
      reject(new Error("getImageDimensions error"));
    }
  });
};

我就是这样渲染的：

<Image
  src={image.src}
  width={image.width}
  height={image.height}
/>

它按预期工作

<Image
  src={image.src}
  width={image.width}
  height={image.height}
/>