为何Next.js图片优化仅在生产环境将图片转为正方形？

可能原因 #

• ImgBB返回的图片元数据（宽高信息）存在缺失或不准确，导致sharp优化工具无法正确识别原始比例
• Vercel生产环境中Next.js图片优化逻辑与本地环境存在差异，处理外部图片时出现比例偏差

解决方法 #

1. 强制指定aspectRatio属性 #

在Image组件中显式设置宽高比，覆盖sharp的自动检测逻辑：

<Image
  className="mb-5 w-full rounded-lg object-cover"
  src={coverImage}
  alt={title}
  width={1000}
  height={500}
  aspectRatio={2 / 1} // 对应1000:500的宽高比
/>

2. 检查并完善next.config.js的图片配置 #

确保已正确配置ImgBB的域名规则，让Next.js能正确处理外部图片优化：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'i.ibb.co',
        pathname: '/**',
      },
    ],
  },
};

module.exports = nextConfig;

3. 使用fill模式结合容器控制尺寸 #

通过外层容器固定比例，让Image组件自适应容器尺寸，彻底规避比例识别问题：

<div className="relative w-full h-[500px] mb-5 rounded-lg overflow-hidden">
  <Image
    className="object-cover"
    src={coverImage}
    alt={title}
    fill
    sizes="100vw"
  />
</div>

补充说明 #

本地环境正常是因为本地图片处理逻辑能正确读取图片原始宽高，而Vercel上的sharp工具在处理ImgBB图片时，可能因图片元数据异常或CDN返回信息问题导致比例识别错误，以上方法可针对性解决该问题。

内容的提问来源于stack exchange，提问作者React-beginner