我需要使用vue.js在移动和桌面视图中显示不同的背景图像 .
这是代码 .
<img :style="{ backgroundImage: 'url(' + offer.image + ')' }"/>
基本上您需要响应式图像，您可以使用媒体查询并根据您的使用情况加载不同的尺寸/图像 . 问题在于您的图像源是动态的，而且：style不支持Media Queries .
我建议你使用图像的src而不是设置背景图像 . 这样你就可以使用srcset来定义断点并根据它来加载图像 .
<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="">
仅作为示例，取决于窗口宽度，相应图像被加载 .
或者您可以使用 <picture> 标记来扩展功能：
<picture>
<picture> <source media="(min-width: 56.25em)" srcset="large.webp" type="image/webp"> <source media="(min-width: 56.25em)" srcset="large.jpg"> <source media="(min-width: 37.5em)" srcset="medium.webp" type="image/webp"> <source media="(min-width: 37.5em)" srcset="medium.jpg"> <source srcset="small.webp" type="image/webp"> <source srcset="small.jpg"> <img src="fallback.jpg" alt=""> </picture>
我还会链接到一个关于网络图像的精彩指南，阅读本文将对您有所帮助：
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=en
1 回答
基本上您需要响应式图像，您可以使用媒体查询并根据您的使用情况加载不同的尺寸/图像 . 问题在于您的图像源是动态的，而且：style不支持Media Queries .
我建议你使用图像的src而不是设置背景图像 . 这样你就可以使用srcset来定义断点并根据它来加载图像 .
仅作为示例，取决于窗口宽度，相应图像被加载 .
或者您可以使用
<picture>标记来扩展功能：我还会链接到一个关于网络图像的精彩指南，阅读本文将对您有所帮助：
https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=en