vue图片引入问题

最新推荐文章于 2025-07-03 11:56:45 发布

jjy8040

最新推荐文章于 2025-07-03 11:56:45 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.youkuaiyun.com/jjy8040/article/details/92803440

vue.js 专栏收录该内容

21 篇文章

订阅专栏

博客指出在Vue方法中判断显示默认本地图片时，直接在方法里写入图片无法显示。建议先使用import引入图片地址，再将该变量赋值给src对应的变量，并给出错误和正确示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一些时候我们需要在方法中判断是否显示默认的本地图片，这时图片直接在方法中写入会无法显示，建议先使用import将图片地址引入，再将该变量赋值给src对应的变量。

错误：

<img :src="userPic" />

computed: {
			userPic() {
				if(this.evaluateList.length != 0){
						return this.evaluateList.headImage;
				}else{
					return '../../assets/home_pic_avatar@3x.png';
				
			}
		}

正确：

<img :src="userPic" />

import picsrc from '../../assets/home_pic_avatar@3x.png';
data() {
	return {
		userDefaultPic: picsrc
	}
},
computed: {
	userPic() {
		console.log(this.evaluateList.length)
		if(this.evaluateList.length != 0) {
			let headImage = this.evaluateList.headImage;
			console.log(this.evaluateList)
			console.log(typeof(headImage));
			console.log(headImage);
			let indexstr = headImage.indexOf('app');
			console.log(indexstr);
			if(indexstr == -1) {
				return this.evaluateList.headImage;
			} else {
				let pic = 'http://ralfael.com/' + this.evaluateList.headImage;
			return pic;
			}
		} else {
			return this.userDefaultPic;
		}

	}
}