reactjs - Next.js の next/image を使用して未知の寸法の画像をレンダリングする方法は?

Question

これは私のユースケースです：

• ブログ記事に画像を追加します。
• これらの画像をレンダリングするために固定サイズを設定することはできません。それぞれに固有の比率がある可能性があるためです
• 400 x 400例: の正方形の画像または長方形の画像をアップロードする場合があります。400 x 200

出典: https://nextjs.org/docs/api-reference/next/image

画像をレンダリングするnext/imageには、要素に直接設定するか<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}
  />
);

これはどのように行われるべきですか？これに対するより簡単な解決策はありますか？