如何使用Next.js的next/image组件渲染未知尺寸的博客图片？

方案有效性判断 #

你提出的实现方式完全正确，这也是Next.js官方推荐的处理动态可变比例图片的标准方案之一。
上传阶段同步保存图片原始宽高的逻辑完全匹配next/image的设计思路：既可以精准保留每张图片的原始比例，也能提前为图片预留渲染占位空间，彻底避免图片加载阶段的布局偏移，性能表现符合最优标准。且仅增加两个数值字段的存储成本极低，后续渲染逻辑简洁无额外运行时开销，可维护性很高。

可替代的简便方案 #

如果你不想在上传阶段额外处理宽高存储，也可以根据自己的技术栈选择以下方案：

1. Next.js 13+ 搭配fill属性实现
   给图片外层套一个相对定位的父容器，父容器设置为宽度撑满博客内容区，Image组件开启fill属性，再搭配object-fit: contain即可自动适配图片比例，不需要提前存储宽高：

// 父容器样式
.image-wrapper {
  position: relative;
  width: 100%;
  min-height: 100px;
}

// 组件调用
<div className="image-wrapper">
  <Image
    src={image.src}
    fill
    alt="博客图片"
    style={{ objectFit: 'contain' }}
  />
</div>

2. Markdown/MDX 博客场景自动处理
   如果你的博客内容用Markdown/MDX编写，可以使用rehype-img-size这类社区插件，在构建阶段自动读取图片的宽高信息并自动注入到next/image组件属性中，你编写内容时只需要用标准Markdown图片语法即可，不需要手动处理宽高相关逻辑。

补充优化提示 #

如果需要让图片自适应博客内容区的宽度，不要固定死渲染尺寸为图片原始宽高，可以给Image组件添加style={{ width: '100%', height: 'auto' }}属性，即可实现所有图片撑满内容区宽度、按原始比例自适应高度的展示效果。

内容的提问来源于stack exchange，提问作者cbdeveloper