vue图片引入问题

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

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

相关阅读

相关 vue 图片引入

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

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

相关 vue图片路径问题

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

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

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

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

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

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

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

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

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

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

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

相关 vue图片引入问题

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

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

相关 vue引入图片和背景图

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

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

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

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

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

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

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

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

相关引入vue

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

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