如何从 Webpack 中 <picture> 的 srcset 属性加载图像？答案

【问题标题】：How to load the image form the srcset attribute of the <picture> in Webpack?如何从 Webpack 中 <picture> 的 srcset 属性加载图像？
【发布时间】：2025-11-27 07:35:02
【问题描述】：

我开始在我的 Webpack 应用程序中使用该标签，并注意到当前设置不适用于 srcset 中引用的图像：

<picture>
<source srcset="img/goal-2.jpg" media="(min-width: 675px)">
<img src="../img/goal-2-s.jpg">
</picture>

goal-2-s.jpg 被正确解析并复制到我的构建文件夹，而 goal-2.jpg 被忽略。

目前我的 webpack.config.js 配置如下所示：

{
    test: /\.(jpe?g|png|gif|svg)$/i,
    loader: 'file?name=img/[name].[ext]'
},...

我不想自动生成不同大小的文件——我正在加载的文件被不同地裁剪，我手动完成并将其保存在我的应用程序文件夹中。我想要的只是 Webpack 以与处理 img 的 src 图像相同的方式处理我的源的 srcset 图像。

谢谢！

【问题讨论】：

标签： image webpack srcset

【解决方案1】：

html-loader默认只处理<img>标签的src属性（如其README所示）。但是您可以使用attrs 选项通过指定tag:attribute 的数组来处理您想要的属性。 .html 规则如下所示：

{
  test: /\.html/,
  loader: 'html-loader?attrs[]=img:src&attrs[]=source:srcset'
}

或者使用更好的 webpack 2 options 语法：

{
  test: /\.html/,
  loader: 'html-loader',
  options: {
    attrs: ['img:src', 'source:srcset']
  }
}

【讨论】：

迈克尔，谢谢！这正是我一直在寻找的。按预期工作。
我为 img:srcset 试过这个，但没有用。请看*.com/questions/51801338/…。

【解决方案2】：

<source srcset="../img/goal-2.jpg" media="(min-width: 675px)">

路径错误

【讨论】：

谢谢，路径实际上是正确的，但是改变路径并没有做任何事情——无论好坏，它都会被 Webpack 忽略。