来自下一个/图像的 400 错误请求答案

【问题标题】：400 bad request from next/image来自下一个/图像的 400 错误请求
【发布时间】：2021-08-14 00:21:58
【问题描述】：

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

当我单击该 URL 时，它显示“请求的资源不是有效的图像”，这很奇怪，因为在从后端检索图像 url 后，我能够下载图像以查看它是有效的图像，所以这个错误发生在图像链接被传递到组件的 props 之后。基本上，我的请求是正确的，但是 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);

【问题讨论】：

从 10.0.8 更新到 11 后我遇到了这个问题。在 10 版本上一切正常

标签： reactjs image next.js nextjs-image

【解决方案1】：

我的话题迟到了，但希望我的回答对其他人有所帮助。

将域的配置添加到 next.config.js 是不够的（仅适用于本地）：

module.exports = {
  ...
  images: {
    domains: ['firebasestorage.googleapis.com'],
  }
}

对于生产，您需要确保您的“下一个”实例获取该配置。

所以在我的情况下，我所做的是：

之前

const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir
  }
});

之后

const nextjsDistDir = join("src", require("./src/next.config.js").distDir);
const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir,
    images: {
      domains: ['firebasestorage.googleapis.com'],
    }
  }
});

【讨论】：

这些更改在哪个文件中？

【解决方案2】：

使用加载器功能解决了这个问题。不知道为什么。但是更新版本是最好的选择。

<Image
    loader={()=>user.coverImage}
      src={user.coverImage}
      alt="user cover image"
      layout="fill"
      objectFit="cover"
/>

【讨论】：

【解决方案3】：

在项目路由的控制台中运行：rm -rf .next/

然后再次运行服务器并尝试

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

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

【讨论】：

我有同样的问题并尝试了这个（甚至比建议的版本更高）但仍然有同样的问题。
您当前使用的是最新版本吗？ @Spirconi
是的，我按照建议尝试了 next@11.0.2-canary.4，现在尝试使用 11.1.3-canary.52。不幸的是同样的问题。我认为这是 AWS 方面的问题。但是，它在本地运行良好。
我没有确切的信息。我目前正在使用 11.0.2-canary.22。我没有任何问题。自-canary.4以来，我从未遇到过这个问题。你可以试试 11.0.2-canary.22。
感谢您的评论。您正在使用 AWS 对吗？现在将尝试 22。

【解决方案5】：

你更新你的 nextjs 版本了吗？似乎 10.1.X 和更新版本有一些问题...... https://github.com/vercel/next.js/issues/23523

【讨论】：