How to load the image form the srcset attribute of the in Webpack?

Question

I started using the tag in my Webpack app and noticed that the current setup is not working with the images referenced in the srcset:

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

The goal-2-s.jpg is correctly resolved and copied over to my build folder, while the goal-2.jpg is ignored.

Currently my webpack.config.js config looks like this:

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

I don't want to auto generate files of different sizes -- I the files I'm loading are differently cropped and I do it manually and save it in my app folder. All I want is Webpack to handle my source's srcset image in the same way as it does the img's src image.

Thanks!

score 5 · Accepted Answer · answered Mar 13 '17 at 18:48

5

The html-loader only processes the src attribute of <img> tags by default (as shown in its README). But you can use the attrs option to make it process your desired attributes by specifying an array of tag:attribute. The .html rule would look like this:

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

Or with the better webpack 2 options syntax:

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

answered Mar 13 '17 at 18:48

Michael Jungo

31,583
3
91
84

Michael, thank you! This is exactly what I was looking for. Works as expected. – LBRTYCAT Mar 13 '17 at 23:51
I tried this for img:srcset and it didn't work. Please have a look at https://stackoverflow.com/questions/51801338/webpack-html-loader-not-resolving-srcset-images. – Chol Nhial Aug 12 '18 at 00:27

score 0 · Answer 2 · answered Mar 13 '17 at 17:32

0

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

The path was wrong

answered Mar 13 '17 at 17:32

Marco Salerno

5,131
2
12
32

Thanks, the path is, actually, right, but changing the path is not doing anything -- it is being ignored by the Webpack no matter good or bad. – LBRTYCAT Mar 13 '17 at 17:47

How to load the image form the srcset attribute of the in Webpack?

2 Answers2