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

时间:2017-03-13 17:26:42

标签: image webpack srcset

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

test('anonymous class implements interface by `class ?`', () => {
    let stub = jest.fn();
    let TestRunner: {new(): Runnable} = class {
        run = stub
    };

    let runner: Runnable = new TestRunner();
    runner.run();

    expect(stub).toHaveBeenCalled();
});

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

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

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

我不想自动生成不同大小的文件 - 我加载的文件会被不同地裁剪,我会手动将其保存在我的app文件夹中。我想要的只是Webpack以与img的src图像相同的方式处理我的源srcset图像。

谢谢!

2 个答案:

答案 0 :(得分:3)

默认情况下html-loader仅处理src标记的<img>属性(如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']
  }
}

答案 1 :(得分:0)

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

路径错误