如何使用 Webpack 2 获取数据属性内的图像？答案

【问题标题】：How to get image that is within a data attrbute with Webpack 2?如何使用 Webpack 2 获取数据属性内的图像？
【发布时间】：2017-04-18 19:17:50
【问题描述】：

我在我的 HTML 中使用 .pug 模板，在我的图像上使用标准 src 属性，如下所示：

img(src=`../images/${image}`)

当我运行webpack -p 时，我的图像的src 中定义的任何图像都会被Webpack 找到并放入我的dist 目录中。这正是我所期望的。

但是，我现在需要延迟加载我的图像，所以我想将对图像的引用放入 data-src 属性而不是标准的 src，如下所示：

img(data-src=`../images/${image}` src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')

当我这样做时再次运行webpack -p，不会抓取图像。

有什么方法可以让 Webpack 查看非 src 属性以意识到它需要这些图像作为生产构建的一部分？

【问题讨论】：

标签： javascript webpack pug webpack-dev-server webpack-2

【解决方案1】：

好的。原来html-loader有一个选项可以传入标签/属性类型供加载器解析，称为attrs，它是这些配置的数组。

我是这样实现的：

{
  test: /\.pug$/,
  use: [
    {
      loader: 'html-loader',
      options: {
        attrs: ['img:src', 'img:data-src', 'link:href']
      }
    },
    {
      loader: 'pug-html-loader',
      options: {
        pretty: true,
        exports: false
      }
    }
  ]
}

现在运行 webpack -p 似乎可以获取这些图像。

希望这对某人有所帮助。

【讨论】：

【解决方案2】：

选项仍然可以与 html-loader 一起出错。您可能需要改用它 https://webpack.js.org/plugins/loader-options-plugin/

【讨论】：