Webpack 在网页包中使用文件加载器和html加载器时，图像的src attr为'；[对象模块]'；

我正在用webpack4从头开始做一个项目。但当我试图在HTML文件中显示图像时，我会遇到一个奇怪的问题：

---

在

npm运行build

之后，图像标记的src被构建为

尝试向文件加载程序添加
esModule:false
选项，如下所示：

  ...
  {
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
  }
  ...

这同样适用于url加载器

在4.3.0版和5.0.0版的文件加载器中引入了esModule选项，默认情况下它被设置为true，这可能是一个突破性的更改

资料来源：




如果您懒惰，可以通过
默认属性从该
模块
对象手动访问图像路径：

const imgPath=require（'path/to/img.jpg'）。默认值；

这将在为分发做好准备后为您提供图像的确切路径，例如：

/images/logo-192.png?88bf116f524693c599897adae2bb688b

如果您使用的是Vue之类的框架，则可以直接将其弹出到src属性中：


您试图如何在HTML文件中显示图像？抱歉。我要更新我的问题。我这样做：
  ...
  {
    test: /\.(jpeg|jpg|png)$/,
    use: [
      loader: 'file-loader',
      options: {
        esModule: false
      }
    ]
  }
  ...

{
    test: /\.(png|jpe?g|gif)$/i,
    loader: 'file-loader',
    options: {
        name: '[name][hash].[ext]',
        outputPath: 'images',
        esModule: false,
    },
},

/images/logo-192.png?88bf116f524693c599897adae2bb688b