Vue CLI3 app, HTML srcset and sizes attributes not supported?

Question

I am trying to use the srcset and sizes HTML attributes for responsive images to serve a certain image to a certain screen size for performance optimization and responsive design. But Vue-loader doesn't seem to support them, anyone had a similar issue? If not what could be a possible solution to best optimize the app's performance that is mostly impacted by HD images. Below is an example of what i am trying to implement in a .vue template

<img srcset="../assets/img-1.jpg 300w,  ../assets/img-1-large.jpg 100vw" 
sizes="(max-width: 56.25em) 20vw, (max-width: 37.5em) 30vw, 300px"
alt="photo 1"
src="../assets/img-1-large.jpg">

thanks in advance.

Estelleesten

Can you provide more details? "Doesn't seem to support them" does not give us much information about what is, or isn't, happening for you. – Hermeneutics

Did you tried this? github.com/vuejs-templates/webpack/issues/… – Euton

I mean they are not applied, the image that gets displayed is the one provided by the default src attribute in all screen sizes. – Estelleesten

@Guto, I just tried it now, didn't work for me, unfortunately, this seems to be meant for CLI2 not 3 since it was added in Dec 2016, but thanks anyway. – Estelleesten

@Estelleesten the solution provided in @Guto's link is exactly what you need. Webpack won't parse the srcset attribute for files to load via the url-loader so you have to do it manually via require(). Can you please add what you tried to your question – Dubonnet

There's a vue-loader PR for this but while it has been merged, it's not in any released version for some reason ~ github.com/vuejs/vue-loader/pull/953 – Dubonnet

@Phil, ok so now, the srcset attribute is working and rendering my photos, however, the sizes which is needed to inform the browser which resolution to use according to a certain screen size attribute, still does NOT work, here is a codepen of my attempt. thanks – Estelleesten

@Estelleesten If providing a Codepen (or any fiddle), at least provide one that points to valid Vue code. Otherwise, it's difficult to determine why your code does not "work". – Contrivance

I actually tried to do it in codesandbox to have my images added to the assets folder and test it, but i honestly don't know if it's even possible to upload img files to the project setup online. is it ? – Estelleesten

Answer 1

So Now its actually working as intended, Thanks to @Guto for his reference, Here is the code that gave me the desired behavior which is to switch the photo's density and resolution according to the screen size and resolution.

let photos = {
  photo1_sm : require('../assets/photo1-sm.jpg'),
  photo1_lg : require('../assets/photo1-lg.jpg')
  }
  
  export default {
    //...
    computed: {
      photos() { return photos }
      }
   }

 <img :srcset="`${photos.photo1_sm} 300w,${photos.photo1_lg}1000w`"
   sizes="(max-width: 990px) 20vw, (max-width: 37.5em) 30vw, 300px"
   alt="Photo 1"
   src="../assets/photo1.jpg">
                                 

PS. I left the src attribute in case the browser that the user is using doesn't support the srcset or sizes attributes but I actually tested it in chrome dev tools and the photo does change according to the screen size. again thanks to all of you one more time, cheers :)

Estelleesten

Answer 2

My preferred way is to use v-bind:srcset.

In example (the same can be applied to sizes):

<img 
   :src="require('@/assets/logo.png')" 
   :srcset="require('@/assets/logo.png') + ' 1x, ' + require('@/assets/[email protected]') + ' 2x'"/>

Notes:

• Advantage - markup is in its own place and no need to over-complicate JS part of the component
• Disadvantage - string concatenation is not always well-readable
• Usage of @ vs relative format in the image path is up for you

Township