"srcset" doesn't seem to be working

[dfdgsdfg]

Here is my file structure.

component > subcomponent > Example.vue
component > subcomponent > assets > photo.jpg
component > subcomponent > assets > [email protected]

Below is what I am trying to.

<!-- Example.vue -->
<img src="./assets/photo.jpg" srcset="./assets/[email protected] 2x">

<!-- Renderd -->
<img src="/static/img/photo.jpg" srcset="./assets/[email protected] 2x">

<!-- Expected -->
<img src="/static/img/photo.jpg" srcset="/static/img/[email protected] 2x">

Maybe html-loader support srcset, but vue-html-loader does not support it?

Looks like same problem here.
https://stackoverflow.com/questions/40733102/vue-webpack-project-img-cannot-load-static-src

[LinusBorg]

you have to tell vue-html loader to parse these attributes.

How to do this is explained here, and you have to insert those options in your wenpack files after this line:

Not tested but should look something like this:

vue: {
  html: {
    query: {attrs: "img:src img:srcset"}
  }
  loaders: //....
}

[dfdgsdfg]

I try to your recipe. Unfortunately it does not work.

<!-- Example.vue -->
<img src="./assets/photo.jpg" srcset="./assets/photo.jpg 1x, ./assets/[email protected] 2x">

<!-- Renderd -->
<img src="/static/img/photo.jpg" srcset="./assets/photo.jpg 1x, ./assets/[email protected] 2x">
<img src="data:image/png;base64,..." srcset="./assets/photo.jpg 1x, ./assets/[email protected] 2x">

<!-- Expected -->
<img src="/static/img/photo.jpg" srcset="/static/img/photo.jpg 1x, /static/img/[email protected] 2x">
<img src="data:image/png;base64,..." srcset="data:image/png;base64,... 1x, data:image/png;base64,... 2x"> <!-- really? -->

Also I found it related base64 encoding loader(probably url-loader?). But I am not sure srcset attirbute can parse base64 encoding with multiple image target such as 1x or 2x.

[LinusBorg]

It seems that srcset specifically is not currently supported by HTML-loader. There was an attempt to add this as a feature, but it was reverted: webpack-contrib/html-loader#79

So I guess you have to do this manually, by importing the impages in the Javascript and using a templatze literal:

var photos = {
  1: require('./assets/photo.jpg'), 
  2: require('./assets/[email protected]')
}

export default {
  // ...component stuff
  computed: {
    photos() { return photos }
  }
}

<img src="/static/img/photo.jpg" v-bind:srcset="`${photos.1} 1x, ${photos.1} 2x`">

If your webpack config has a limit for the url-loader and you want to prevent inline data-urls, you may have to overwrite the loader:

require('!!url-loader?limit=0!./assets/photo.jpg')

[AndreKR]

I made a PR. (vuejs/vue-loader#953)