next-images错误:模块分析失败:意外字符'�‘

Question

我正在尝试加载一个带有next-images的图像:当我输入图像名称时，它可以正常工作：

//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很可能会在构建时查找并包含您的映像。这不适用于从变量中读取名称。您有两个选项：

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