Question

我正在尝试将srcset和sizes HTML属性用于响应图像，以将特定图像提供给特定屏幕尺寸，以进行性能优化和响应设计。但是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">

PS。我保留了src属性，以防用户使用的浏览器不支持srcset或sizes属性但是我实际上是在chrome开发工具中测试过的，照片确实会根据屏幕尺寸而变化。再次感谢大家，加油：）

Answer 2

我的首选方式是使用v-bind:srcset。

在示例中（同样可以应用于sizes）：

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

注意：

优点-标记就位，并且无需使组件的JS部分过于复杂
缺点-字符串连接并不总是易于理解
在图像路径中使用@与相对格式比较合适

不支持Vue CLI3应用，HTML srcset和sizes属性吗？

2 个答案: