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

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>

我还将为您链接一个关于网络图像的真棒指南，阅读这篇文章将对您有很大帮助：

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