vue.js 动态加载图片

<template>
  <img src="/path/to/image.png" alt="示例图片">
</template>

<template>
  <img :src="imageSrc" alt="动态图片">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '/path/to/dynamic-image.png'
    };
  }
};
</script>

<template>
  <img :src="computedImageSrc" alt="计算属性图片">
</template>

<script>
export default {
  data() {
    return {
      imageName: 'dynamic-image.png'
    };
  },
  computed: {
    computedImageSrc() {
      return `/path/to/${this.imageName}`;
    }
  }
};
</script>

<template>
  <img v-if="imageSrc" :src="imageSrc" alt="异步加载图片">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: null
    };
  },
  mounted() {
    this.fetchImageSrc();
  },
  methods: {
    async fetchImageSrc() {
      // 假设这是获取图片路径的API调用
      const response = await fetch('/api/get-image-src');
      const data = await response.json();
      this.imageSrc = data.imageSrc;
    }
  }
};
</script>

<template>
  <img v-if="isVisible" :src="imageSrc" alt="懒加载图片" ref="image">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '/path/to/image.png',
      isVisible: false
    };
  },
  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.isVisible = true;
          observer.unobserve(this.$refs.image);
        }
      });
    });
    observer.observe(this.$refs.image);
  }
};
</script>