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.

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 :)