Vue CLI3 app, HTML srcset and sizes attributes not supported?
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 attributesbut 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 :)
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/logo@2x.png') + ' 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