vue图片引入问题

小灰灰 2022-10-02 12:55 214阅读 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 条评论，214人围观）

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

相关阅读

相关 vue 图片引入

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

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

相关 Vue 引入组件、引入图片

引入组件的两种方法 1、全局引入（在App.vue的script标签中） 1、引入（Import 变量 from 路径） import head fo

落日映苍穹つ/ 2023年07月20日 05:39/ 0 赞/ 28 阅读

相关 vue的三种图片引入方式

![20180420110030120][] 首先给图片地址绑定变量 <template> <img :src="imgUrl"> </template>

╰+攻爆jí腚メ/ 2023年07月06日 13:18/ 0 赞/ 1 阅读

相关 uni-app 本地图片引入问题

uni-app版本2.7.14.20200618 在js中通过require() 引入图片（图片大小不能超过3kb） {img:require('@/static/

喜欢ヅ旅行/ 2023年02月23日 12:16/ 0 赞/ 12 阅读

相关 vue组件引入本地静态图片

vue2组件引入本地图片的的两种方式： 1，使用@引入：这是在组件内直接引用和普通的html方法一样，代码如下： <img src="@/assets/te

青旅半醒/ 2023年02月08日 12:59/ 0 赞/ 11 阅读

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

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

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

相关 vue图片引入问题

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

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

相关 vue引入图片和背景图

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

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

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

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

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

相关引入vue

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

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