Vue - 根据屏幕大小更改 URL 图片路径

Question

我想在我的屏幕尺寸改变时改变图像源。我正在使用 Nuxt。我目前有这个代码：

<div v-for="(item, index) in aside" :key="index"">
   <img :src="item.svgIconDark.filename" />
</div>

那是从 StoryBlok API 调用我的图像。 StoryBlok 包含 2 个我可以用于图像的路径。

在低于中等尺寸的屏幕上，我想显示 item.svgIconDark.filename

在中等尺寸的屏幕上，我想显示 item.svgIconLight.filename。

我也在使用 Tailwind CSS。非常感谢任何帮助。谢谢。

Answer 1

有两种可能的解决方案。

显示两张图片并show/hide使用CSS媒体查询

<template>
<div>
  <img src="mobileImage" class="mobile" />
  <img src="desktopImage" class="desktop" />
</div>
</template>

<style>
// I've omitted exact query. try implement the query on your own.
@media /* mobile query */ {
  img.desktop {
    display: none;
  }
}
@media /* desktop query */ {
  img.mobile {
    display: none;
  }
}
</style>

订阅调整大小事件并实现 show/hide 逻辑

<script>
export default {
  data: () => ({
    windowSize: 'mobile'
  }),
  beforeMount() {
    window.addEventListener('resize', this.onResize.bind(this))
  },
  beforeDestroy() {
    // don't forget to implement unsubscribe event.
  },
  methods: {
    // when implementing this in production,
    // try wrap this method with debounce method first
    // because there will be users with a REALLY BAD PC out there.
    onResize() {
      if (window.innerWidth >= x) this.windowSize = 'mobile';
      // ...
    }
  }
}
</script>

Vue - 根据屏幕大小更改 URL 图片路径

Vue - change URL image path based on screen size

background

image

vue.js