引言

图片资源概述

访问本地图片资源

方法一:使用require语法

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

<script>
export default {
  data() {
    return {
      imageSrc: require('@/assets/images/example.png')
    };
  }
}
</script>

方法二:使用import语法

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

<script>
import exampleImage from '@/assets/images/example.png';

export default {
  data() {
    return {
      imageSrc: exampleImage
    };
  },
  mounted() {
    this.imageSrc = exampleImage;
  }
}
</script>

方法三:使用变量动态设置src

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

<script>
export default {
  data() {
    return {
      imageSrc: ''
    };
  },
  methods: {
    changeImage() {
      this.imageSrc = require('@/assets/images/another-example.png');
    }
  }
}
</script>

注意事项

  1. 缓存处理:合理利用浏览器缓存,可以显著提高页面加载速度。

总结