我正在从 tmdb api 获取数据。但是图像没有加载所以我在新选项卡中打开图像。然后它显示
“url”参数有效，但上游响应无效 ，如何解决问题
下一个js图像组件错误“url”参数有效但上游响应无效
IT技术
reactjs
image-processing
next.js
2021-05-21 16:47:42
3个回答
我面临着同样的问题，尽管我在 cloudinary 上托管我的图像，如果我使用普通<img/>标签它确实可以工作，所以我将 nextjs 版本更改package.json为如下所示，它工作得很好：希望它也适用于你
"dependencies": {
...
"next": "11.0.1",
...
}
您是否将图像的域添加到下一个配置中？
下面是一个例子：
//next.config.js
module.exports = {
reactStrictMode: true,
webp: {
preset: "default",
quality: 100,
},
images: {
domains: ["randomuser.me", "firebasestorage.googleapis.com"],
},
//Internationalization
i18n: {
locales: ["en", "it"],
defaultLocale: "en",
},
};
我忘记在 nginx 中添加 X-Forwaded-For 和 X-Real-IP 标头，这导致我在 next.config.js 中指定的图像域出现问题
如果您使用 http 服务
location / {
proxy_set_header Host $host;
proxy_set_header X-Real-IP $proxy_protocol_addr;
proxy_set_header X-Forwarded-For $proxy_protocol_addr;
proxy_pass http://somehost:port;
}
如果您使用 uWSGI 检查服务，您将根据https://uwsgi-docs.readthedocs.io/en/latest/tutorials/Django_and_nginx.html#configure-nginx-for-your-site包含 params 文件