小编emm*_*mma的帖子

所以我试图用 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);

我在 node_modules 中的 monaco-editor 的 css 文件之一中收到语法错误。这是一个未知单词错误：

> 1 | // Imports
    | ^
  2 | import ___CSS_LOADER_API_IMPORT___ from "../../../../../../css-loader/dist/runtime/api.js";
  3 | var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});
 @ ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.css 2:12-317 9:17-24 13:15-29

但是，我在我的中配置了 css-loader webpack.config.js：

const HtmlWebPackPlugin = require("html-webpack-plugin");
const PerspectivePlugin = require("@finos/perspective-webpack-plugin");
const path = require("path");
const plugins = [
  new HtmlWebPackPlugin({
    title: "Perspective React Example",
    template: "./src/frontend/index.html",
  }),
  new PerspectivePlugin(),
];
module.exports = {
  context: path.resolve(__dirname),
  entry: "./src/frontend/index.tsx",
  mode: "development",
  devtool: "source-map",
  resolve: {
    extensions: [".ts", ".tsx", …