不支持 Vue CLI3 应用程序、HTML srcset 和尺寸属性？答案

【问题标题】：Vue CLI3 app, HTML srcset and sizes attributes not supported?不支持 Vue CLI3 应用程序、HTML srcset 和尺寸属性？
【发布时间】：2019-03-15 22:17:35
【问题描述】：

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

提前致谢。

【问题讨论】：

你能提供更多细节吗？ “似乎不支持他们”并没有为我们提供太多关于您正在发生或未发生的事情的信息。
你试过了吗？ github.com/vuejs-templates/webpack/issues/…
我的意思是它们没有被应用，显示的图像是所有屏幕尺寸的默认src属性提供的图像。
@Guto，我现在刚试了一下，对我没用，不幸的是，这似乎适用于 CLI2 而不是 3，因为它是在 2016 年 12 月添加的，但无论如何谢谢。
@Phil，好的，现在，srcset 属性正在工作并渲染我的照片，但是，sizes 需要通知浏览器根据特定屏幕尺寸使用哪种分辨率属性，仍然不起作用，这是我尝试的codepen。谢谢

标签： html vue.js responsive-design vue-loader vue-cli-3

【解决方案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 开发工具中对其进行了测试，并且照片确实根据屏幕尺寸而变化。再次感谢你们所有人，干杯:)

【讨论】：

【解决方案2】：

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

例如（同样可以应用于sizes）：

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

注意事项：

优势 - 标记在自己的位置，无需过度复杂化组件的 JS 部分
缺点 - 字符串连接并不总是可读性好
@ 与图像路径中的相对格式的用法适合您

【讨论】：