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

Question

我正在从头开始用 webpack4 做一个项目。但是当我尝试在 HTML 文件中显示图像时，我遇到了一个奇怪的问题： npm run build后，image标签的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'
      ]
  }

以及这两个loader的版本：

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

我不知道问题出在哪里...

Answer 1

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

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

同样适用于 url-loader。

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

来源：

Answer 2

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

Answer 3

如果你懒惰，可以通过 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">

当在 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

webpack-file-loader

webpack-html-loader