reactjs - 来自下一个/图像的 400 错误请求

Question

所以我试图用下一个/图像的组件显示图像。但是，没有显示图像。我相信这是因为 400 bad request error next/image 给了我。

当我单击该 URL 时，它显示“请求的资源不是有效图像”，这很奇怪，因为从后端检索图像 url 后，我能够下载图像以查看它是有效图像，所以在图像链接在组件的道具中传递后立即发生此错误。基本上，我的请求是正确的，但是 next/image 与图像 url 的交互被搞砸了。奇怪的是几天前我也没有这个错误，在没有改变任何东西之后，我看到了这个错误。

我已经像这样配置了 next.js 配置文件，并且对后端的请求确实检索了可下载的图像（next/image 只是没有正确显示它）。

这是我的 next.js 配置文件：

const withPlugins = require('next-compose-plugins');
const withImages = require('next-images');

const nextConfig = {
  images: {
    domains: [
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
      'url.s3.amazonaws.com',
    ],
  },
  
};


module.exports = withPlugins([[withImages]], nextConfig);

标签： reactjsimagenext.jsnextjs-image

Answer 1

此问题是由于 next.js 版本 11 造成的。该问题已在next@11.0.2-canary.4版本中得到修复。您可以更新版本。问题将得到解决。