vue图片引入问题

小灰灰 2022-10-02 12:55 153阅读 0赞

在一些时候我们需要在方法中判断是否显示默认的本地图片，这时图片直接在方法中写入会无法显示，建议先使用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;
    		}
    
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 图片引入

vue 图片引入 <template> <div> <img src="@/assets/img/logo.png">

电玩女神/ 2024年03月31日 09:04/ 0 赞/ 46 阅读

相关 vue图片路径问题

Vue图片路径问题（动/静态引入：绝对路径、相对路径） DEMO实例（可快速解决问题）: 注意：绝对路径方式导入的图片需要存储在 publiic 文件夹下静态

川长思鸟来/ 2023年10月15日 15:39/ 0 赞/ 15 阅读

相关 vue引入assets下图片路径找不到问题

一、概述项目目录结构 ./ ├── assets │ └── logo.png └── components └─

「爱情、让人受尽委屈。」/ 2022年11月16日 10:48/ 0 赞/ 339 阅读

相关 vue图片引入问题

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

小灰灰/ 2022年10月02日 12:55/ 0 赞/ 154 阅读

相关 vue引入图片和背景图

1，引入图片，在img元素中用：src绑定地址的 ![70][] 2，直接在样式中引用的 ![70 1][] [70]: /images/20220510

ゝ一世哀愁。/ 2022年05月10日 03:46/ 0 赞/ 255 阅读

相关 vue模板中对图片src的动态引入（路径）问题

在做移动端项目时，底部导航的名称和图片习惯于用json文件中引入数据。而在vue项目中，当要在中动态引入图片时，若直接从json文件中导入item.src字段为’assets/

灰太狼/ 2022年03月15日 06:00/ 0 赞/ 412 阅读

相关 Thinkphp5背景图片的引入~ 以及图片的引入

![1563595-20190122095303140-1796503713.png][] 将图片信息从数据库查询再渲染于前台页面 ![1563595-201901261

桃扇骨/ 2022年01月05日 11:27/ 0 赞/ 437 阅读

相关 vue异步图片不显示？模块化引入之

![1202322-20190618094844509-343176079.png][] 转载于:https://www.cnblogs.com/LLLLily/

小灰灰/ 2021年12月11日 10:55/ 0 赞/ 254 阅读

相关 md中引入图片

1. 在sublime中写markdowm，引入图片写法如下参考样式：!\[Alt\](images/1.png) 2.如果想改变图片大小，写法按如下不支持

快来打我*/ 2021年09月24日 12:56/ 0 赞/ 411 阅读

相关引入vue

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

叁歲伎倆/ 2021年08月19日 21:41/ 0 赞/ 472 阅读