引言
图片资源概述
访问本地图片资源
方法一:使用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>
注意事项
缓存处理:合理利用浏览器缓存,可以显著提高页面加载速度。