typescript - NextJS 图像优化在 Vercel 生产环境中不起作用

目前我正在开发一个 NextJS 应用程序。我的应用程序将通过多个域名在 Vercel 上部署。该应用程序应动态渲染图像。在 Vercel 的预览环境中，所有图像都能正确渲染，但当我将应用程序部署到生产环境时，优化图像的响应为：Bad request INVALID_IMAGE_OPTIMIZE_REQUEST

如果我请求原始（未优化）图像，一切都按预期工作。我使用的是最新版本的 NextJS（14.0.4）

我尝试过为 NextJS 使用多种不同的配置（config.nextjs.mjs）。我还尝试手动请求不同的图片（原始和优化过的）。

我目前的 next.config.mjs 看起来是这样的

images: {
    dangerouslyAllowSVG: true,
    remotePatterns: [
        {
            hostname: 'domain1.example.com',
        },
        {
            hostname: 'domain2.example.com',
        },
    ],
},

我的图片网址例如是 /api/images/some-image-uuid。为了加载优化后的图片，我使用 NextJS 的 Image 组件（来自 next/image）。

答案＃1

你的 nextconfig 可能不完整。我建议添加协议和端口，以及其他必要的属性。这里是文档

你可能还需要在 images 对象中添加域。问题如下

images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "openweathermap.org",
        port: "",
      },
    ],
  },

答案＃2

在我的情况下，我将我的图片迁移到了另一个 S3 存储桶，但忘记在我的生产环境变量中反映这一更改。

我花了几个小时挖掘，但当我替换环境变量时，我的图片又开始显示了。