不支持 Vue CLI3 应用程序、HTML srcset 和 size 属性？

Question

我正在尝试使用响应式图像的srcset和sizesHTML 属性将特定图像提供给特定屏幕尺寸以进行性能优化和响应式设计。但是 Vue-loader 似乎不支持它们，有人遇到过类似的问题吗？如果不是，有什么可能的解决方案可以最好地优化主要受高清图像影响的应用程序性能。下面是我试图在 .vue 模板中实现的示例

<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">

提前致谢。

Answer 1

所以现在它实际上按预期工作，感谢@Guto 的参考，这是给我所需行为的代码，即根据屏幕尺寸和分辨率切换照片的密度和分辨率。

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">
                                 

附注。src如果用户使用的浏览器不支持srcsetorsizes属性，我保留了该属性，但我实际上在 chrome 开发工具中对其进行了测试，并且照片确实根据屏幕尺寸而变化。再次感谢你们所有人，欢呼：）