Question

我在我的图片上使用.pug模板作为HTML和标准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属性，以实现它需要将这些图像作为生成构建的一部分？

Answer 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来获取这些图片。

希望这可以帮助某人出去。

Answer 2

选项仍然可能会导致html-loader出错。您可能需要使用它 https://webpack.js.org/plugins/loader-options-plugin/

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

2 个答案: