I cannot deploy to vercel because I get the error: Specified images.domains should be an Array of strings received invalid values ()

Question

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

Build error occurred 14:34:33.017 Error: Specified images.domains should be an Array of strings received invalid values ().

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

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,
    NEXT_PUBLIC_IMAGES_DOMAIN: process.env.NEXT_PUBLIC_IMAGES_DOMAIN,
  },

  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

我像这样用 out-fetch 调用我的图像

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

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

Answer 1

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

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

您说得对，您需要将 Environment Variables 添加到 Vercel 项目中。

I cannot deploy to vercel because I get the error: Specified images.domains should be an Array of strings received invalid values ()

I cannot deploy to vercel because I get the error: Specified images.domains should be an Array of strings received invalid values ()

deployment

heroku

next.js

vercel

nextjs-image