Images srcset not working

[niveshsaharan]

It doesn't load srcset images. For eg. I have this in my template:

<img src="images/logo.png" srcset="images/logo.png 1x, images/logo_2x.png 2x" alt="" />

But it won't load the images.

[bstaruk]

Noted! I'll take a peek at this within the next few days to see if I can reproduce and resolve the issue.

[bstaruk]

I did some digging and this seems to be a limitation of html-loader. You can modify the options of html-loader to cover img:srcset, but it doesn't know how to handle the comma-delimited syntax of an inline srcset prop (it looks for ./images/logo.png 1x, images/logo_2x.png 2x).

The best approach I could find is modify the html-loader options in /webpack/webpack.config.base.js to include attrs: ['img:src', 'source:srcset'],. This will allow you to use srcset via picture and source elements (more info on MDN), at least.

I'm going to leave this issue open, but tag as a feature request, to keep it visible and open for discussion. I am very open to suggestions, especially when it comes to replacing dependencies with better others that may be a better fit for the project.

A few links for further reading on the issue:

• "srcset" doesn't seem to be working vuejs-templates/webpack#396
• Add support for srcset webpack-contrib/html-loader#55
• Revert "Add support for srcset" webpack-contrib/html-loader#79

[niveshsaharan]

@bstaruk Adding attrs: ['img:src', 'img:srcset'], to html-loader options works with just one value and that's only when I don't provide the size of it.

Works:
<img src="images/logo.png" srcset="./images/logo.png" alt="" />

Doesn't work:
<img src="images/logo.png" srcset="./images/logo.png 1x" alt="" />
<img src="images/logo.png" srcset="./images/logo.png 1x, images/logo_2x.png 2x" alt="" />

[bstaruk]

The issue here is that html-loader doesn't support srcset, and even if you tell it to look at the srcset attribute (via config), it doesn't know how to parse the multiple-source syntax. This results in html-loader looking for an image asset with the source ./images/logo.png 1x, images/logo_2x.png 2x, which of course doesn't exist.

There is no out-of-the-box solution right now, unfortunately. I was able to get it working with picture and source elements (detailed in my previous comment), but not img elements with srcset attributes.

starbase depends on html-loader to parse/build our html templates into working, production-ready files, so we can't just remove it from the project. We're at an impasse until html-loader builds support for srcset, or another plugin with srcset support becomes available to replace html-loader with.

[bstaruk]

I'm going to close this task because there's really nothing I can do to address it.

I will certainly keep an eye out for updates to (and replacements for) html-loader and request that anyone who shares this issue does the same.

If there are any developments or anyone has any comments on the matter, please do feel free to continue the discussion by replying to this issue.