当我在 vercel 上部署时出现此错误
生成错误发生 14:34:33.017 错误:指定的图像。域应该是接收到无效值的字符串数组 ()。
为了让图像在本地显示在我的屏幕上,我做了以下设置:
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
我像这样调用我的图像
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 服务器错误。但是我也不知道我应该如何解决这个问题。