5

我正在尝试使用响应式图像的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">

提前致谢。

4

2 回答 2

5

所以现在它实际上按预期工作，感谢@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属性，以防用户使用的浏览器不支持srcsetorsizes属性，但我实际上在 chrome 开发工具中对其进行了测试，并且照片确实会根据屏幕尺寸发生变化。再次感谢你们所有人，干杯:)

于 2018-10-12T14:47:04.560 回答
2

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

例如（同样适用于sizes）：

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

笔记：

  • 优点 - 标记在它自己的位置，不需要过度复杂化组件的 JS 部分
  • 缺点 - 字符串连接并不总是可读性好
  • 在图像路径中使用@vs 相对格式由您决定
于 2019-05-04T05:34:47.427 回答