在 webpack 中使用 file-loader 和 html-loader 时，图像的 src attr 是 '[object Module]'答案

【问题标题】：When using file-loader and html-loader in webpack the src attr of image is '[object Module]'在 webpack 中使用 file-loader 和 html-loader 时，图像的 src attr 是 '[object Module]'
【发布时间】：2020-03-25 14:57:31
【问题描述】：

我正在从头开始使用 webpack4 做一个项目。但是当我尝试在 HTML 文件中显示图像时，我遇到了一个奇怪的问题：在npm run build之后，图片标签的src构建为<image src="[object Module]"。 HTML部分是：

<img src="images/main_background.jpg">

webpack.config.js 是这样的：

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

以及这两个加载器的版本：

"file-loader": "^5.0.2",
"html-loader": "^0.5.5",

我不知道是什么问题...

【问题讨论】：

您是如何尝试在 HTML 文件中显示图像的？
对不起。我要更新我的问题。我这样做：

标签： webpack webpack-file-loader webpack-html-loader

【解决方案1】：

如果您比较懒惰，您可以通过 default 属性从该 Module 对象手动访问图像路径：

const imgPath = require('path/to/img.jpg').default;

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

/images/logo-192.png?88bf116f524693c599897adae2bb688b

如果你使用像 Vue 这样的框架，你可以直接把它弹出到 src 属性中：

<img :src="require('path/to/img.jpg').default">

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

尝试像这样将esModule: false 选项添加到文件加载器：

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

同样适用于 url-loader。

esModule 选项已在 4.3.0 版本的文件加载器中引入，在 5.0.0 中它已默认设置为 true，这可能是一项重大更改。

来源：

【讨论】：