一、静态图片在Vue中的位置

二、使用绝对路径引用图片

<img src="/static/images/logo.png" alt="Logo">

三、使用变量动态设置图片路径

<template>
  <img :src="imageSrc" alt="Dynamic Image">
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '/static/images/dynamic.jpg'
    };
  }
};
</script>

四、处理网络图片

<template>
  <img :src="imageUrl" alt="Network Image">
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: ''
    };
  },
  mounted() {
    axios.get('http://example.com/image.jpg')
      .then(response => {
        this.imageUrl = response.data;
      })
      .catch(error => {
        console.error('Error fetching image:', error);
      });
  }
};
</script>

五、优化图片加载

  1. 使用适当的图片格式：根据图片内容选择合适的格式，如JPEG适用于照片，PNG适用于透明或简单的图形。
  2. 压缩图片：使用图片压缩工具减少图片文件大小，同时尽量保持图片质量。
  3. 懒加载：使用懒加载技术，只有当图片进入视窗时才开始加载。

六、实例详解

以下是一个结合了以上技巧的Vue组件实例：

<template>
  <div>
    <img :src="imageSrc" alt="Optimized Image" @load="imageLoaded">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '/static/images/optimized.jpg',
      isImageLoaded: false
    };
  },
  methods: {
    imageLoaded() {
      this.isImageLoaded = true;
      console.log('Image loaded');
    }
  }
};
</script>

七、总结