next-images 错误：模块解析失败：意外字符“�”

Question

我正在尝试使用下一个图像加载图像：当我输入图像名称时，它工作正常：

//Working
<Image src={require(`../../images/exampleImage.jpg` )}/>

但我不希望我想要这样的动态 url：

//Not working
<img src={require(`../../images/${image}.jpg` )}/>

我收到此错误：

---

错误：模块解析失败：意外字符“�”(1:0) 您可能需要适当的加载器来处理此文件类型，目前没有配置加载器来处理此文件。 请参见https://webpack.js.org/concepts#loaders （此二进制文件省略了源代码）

我的 next.config.js 文件：

const withImages = require("next-images");
module.exports = withImages();

我也试过这个配置：

module.exports = {
  webpack: (config, options) => {
    config.module.rules.push(
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        loader: 'url-loader?limit=100000' 
      }
    )
    return config
  },
}

尝试了很多方法，但似乎都不起作用，请帮忙，谢谢

Answer 1

如果您愿意使用file-loader库来处理项目中的图像。 您可以在 webpack 上安装库并设置如下规则：

...
config.module.rules.push(
  {
    test: /\.(png|jpeg|jpg|gif|svg)$/,
    use: {
      loader: "file-loader"
    },
  }
),

您可以从webpack上的文档中阅读有关文件加载器的更多信息

Answer 2

Webpack 最有可能在构建时尝试查找并包含您的图像。 这不适用于从变量中读取名称。 您有 2 个选项：

• 以不同方式管理图像
• 如果您有一个有限（或相当短）的图像列表，只需全部导入并使用某种开关来控制显示哪个图像。

Answer 3

我也有这个问题。

• 删除next.config.js中的所有代码
• 添加以下代码：

/** @type {import('next').NextConfig} */
const nextConfig = { 
    reactStrictMode: true,
    images: {
        dangerouslyAllowSVG: true,
        contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    },
};
    
module.exports = nextConfig;

它解决了我的问题。