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

Question

我正在从头开始使用 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",

我无法弄清楚问题是什么...

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，这可能是一个重大更改。

资料来源：

• 文件加载器发布历史
• 相关的github问题

Answer 2

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

Answer 3

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

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

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

/images/logo-192.png?88bf116f524693c599897adae2bb688b

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

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