2

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

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

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

//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
  },
}

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

4

2 回答 2

0

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

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

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

于 2021-05-22T22:50:33.570 回答
0

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

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