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);

Answer 1

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

Answer 2

我迟到了这个话题，但希望我的回答能帮助别人。

将域的配置添加到 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'],
    }
  }
});

Answer 3

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

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

Answer 4

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

Answer 5

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

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