Question

我需要使用vue.js在移动和桌面视图中显示不同的背景图像。

这是代码。

<img :style="{ backgroundImage: 'url(' + offer.image + ')' }"/>

Answer 1

基本上，您需要一个响应式图像，您可以使用媒体查询并根据您的用途加载不同的尺寸/图像。问题在于您的图像源是动态的，：style不支持媒体查询。

我建议您使用图像的src而不是设置背景图像。这样，您就可以利用srcset，它可以定义断点并根据该断点加载图像。

<img src="small.jpg" srcset="small.jpg 320w, medium.jpg 600w, large.jpg 900w" alt="">

仅作为示例，取决于窗口的宽度，相应的图像将被加载。

或者您可以使用<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>

我还将为您链接有关网络中图像的AWESOME指南，阅读该指南将为您带来很多帮助：

https://developers.google.com/web/fundamentals/design-and-ux/responsive/images?hl=en

如何使用vue.js在移动视图中更改背景图片

1 个答案: