我无法部署到 vercel，因为我收到错误：指定的 images.domains 应该是收到无效值的字符串数组 ()

问题描述

当我在 vercel 上部署时出现此错误

发生构建错误 14:34:33.017 错误：指定的 images.domains 应该是收到无效值的字符串数组 ()。

为了在本地屏幕上显示图像，我进行了以下设置：

module.exports = {
  env: {
    NEXT_PUBLIC_STRAPI_URL: process.env.NEXT_PUBLIC_STRAPI_URL,NEXT_PUBLIC_IMAGES_DOMAIN: process.env.NEXT_PUBLIC_IMAGES_DOMAIN,},publicRuntimeConfig: {
    NEXT_PUBLIC_STRAPI_URL: process.env.NEXT_PUBLIC_STRAPI_URL,images: {
    deviceSizes: [640,750,828,1080,1200,1920,2048,3840],imageSizes: [16,32,48,64,96],domains: [process.env.NEXT_PUBLIC_IMAGES_DOMAIN],path: "/_next/image",loader: "default",webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,use: ["@svgr/webpack"],});

    return config;
  },};

在我的 env.local 我已经把这个

NEXT_PUBLIC_STRAPI_URL= ...
NEXT_PUBLIC_IMAGES_DOMAIN=localhost

我像这样调用我的图像

const Potato = ({ assets}) => { 
 <Image
   src={process.env.NEXT_PUBLIC_STRAPI_URL + assets.hat.svg.url}
   width={assets.hat.svg.width}
   height={assets.hat.svg.height}
 />
}

在本地我可以看到图像，但是当我在本地运行我的应用程序时，我的 console.log 中也会出现此错误。我不知道如何或为什么。因为我的图像加载得很好。也许这就是 Vercel 不起作用的原因，但我不知道两者是否相关。

以上所有设置几乎完全从该视频中复制粘贴（从第 10-16 分钟观看）： youtube

到目前为止我尝试过的： 将 NEXT_PUBLIC_IMAGES_DOMAIN 添加到 Vercel 的环境变量中，并将我的 Heroku 后端的名称作为值（就像我为 NEXT_PUBLIC_STRAPI_URL 所做的那样），部署正常，但我收到了 500 服务器错误。但后来我也不知道我应该如何解决这个问题。

解决方法

由于您使用的是 .env.local，因此您无需将 env/publicRuntimeConfig 放在 next.config.js 中。 You can remove those。

如果您使用默认值，则也不需要为图像设置 path 和 loader。唯一需要的值是 domains - 然后您当然可以选择 deviceSizes 和 imageSizes。

您是正确的，您需要在 Vercel 项目中添加您的 Environment Variables。