最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件。因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载。下面是核心组件代码:

 <el-tree :data="data" class="tree-view" node-key="id" :props="defaultProps" @node-click="click" :default-checked-keys="[1]">
<span class="custom-tree-node" slot-scope="{node, data}">
<img v-if="data.iconSkin != undefined" :src="data.iconSkin" style="margin-right: 0.3em; " />
<span @click="getChildNodes(data.id) ">{{ node.label }}</span>
</span>
</el-tree>

后台交互使用了vuex和axios,本篇文章后台数据没有问题,所以不做展示了。后台传入的数据结构是这样的:

{
"id": "2|299|0",
"open": false,
"maxStatus": 0,
"iconSkin": "res1",
"name": "test",
"children": [],
"parent": false
}

Vue中动态加载图片需要使用require,这个很多文章都有介绍。具体可以参考这篇文章vue的 v-for 循环中图片加载路径问题

一开始我认为直接在后台传入完整的js语句就能加载,所以我把后台传入的数据iconSkin写成了完整的路径。也就是require(@/assets/resourceimage/res1.png),具体代码跟最上面的代码片段一致。

本来以为这样就能加载成功了,打开chrome查看发现图片裂开了,也就是图片获取失败了。检查HTML元素,发现图片的路径是字符串。

这是因为js在解析对象的时候并不会把字符串当成js对象去解析,因此解析出的路径显示成了字符串。在多次尝试和查资料以后我找到了几个解决方案

方案一:在src路径写require

这个方案比较简单,<img v-if="data.iconSkin != undefined" :src="require(@/assets/resourceimage/${data.iconSkin}.png)" style="margin-right: 0.3em; " />

只要保证数据是正确的,这个方案是完全可以的。

方案二:使用computed

computed是Vue里的计算属性,computed会在state数据更新时自动计算。

	computed: mapState({
tree: function(state) {
const data = state.resTree.treeResult;
if (data != null) {
const result = state.resTree.treeResult;
return result.data;
}
}
})

但是注意,此时不能使用方案一那样的形式了,应该将computed的数据绑定在组件上,然后通过v-for的方式进行调用。以element-UI的el-tree组件为例,我们可以这样写:

<el-tree :data="tree" class="tree-view" node-key="id" :props="defaultProps" >
<span class="custom-tree-node" slot-scope="{node, tree}">
<img :src="getUrl(`${node.icon}`)" style="margin-right: 0.3em; " />
<span>{{node.label}}</span>
</span>
</el-tree>
<script>
methods: {
getUrl(url) {
return require(`@/assets/resourceimage/${url}.png`);
}
}
</script>

这个用法比较简单,它把computed的计算结果——也就是tree绑定到el-tree的data上,这样就可以使用内部的node使用tree中的数据了。

切记不要使用下面的记住写法:

  1. require('@/assets/resourceimage/'+${node.icon}'+'.png');
  2. require('@/assets/resourceimage/'+{{node.icon}}'+'.png');

Vue 动态图片加载路径问题和解决方法的更多相关文章

  1. linux和windows动态库加载路径区别

    # linux和windows动态库加载路径区别 ### 简介------------------------------ linux加载动态库的路径是系统目录/lib和/usr/lib.- wind ...

  2. Java的cmd配置(也即Java的JDK配置及相关常用命令)——找不到或无法加载主类 的解决方法

    Java的cmd配置(也即Java的JDK配置及相关常用命令) ——找不到或无法加载主类  的解决方法 这段时间一直纠结于cmd下Java无法编译运行的问题.主要问题描述如下: javac 命令可以正 ...

  3. U盘加载速度慢的解决方法

    在日常的生活和工作中,我们经常用U盘存储一些文件和程序.然而,一些朋友发现U盘有时候在使用过程中的识别加载速度非常缓慢.是U盘出故障了吗?其实不尽然,下面就为大家分享一下如何快速解决U盘加载缓慢的方法 ...

  4. VB 6.0不能加载MSCOMCTL.OCX的解决方法

    问题场景:打开 VB 6项目时报错,不能加载 'C:\WINDOWS\system32\MSCOMCTL.OCX'--继续加载工程吗? 解决方法: 1.新建一个VB工程,然后按CTRL + T,选中  ...

  5. vue的 v-for 循环中图片加载路径问题

    先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...

  6. 谈谈动态地加载Jquery库文件的方法

    有时候,我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库,可能在用户点击某个按钮后,才去加载 Jquery 库. 好处不用 ...

  7. OpenCV程序在Debug时出现「PDB文件无法加载」的一个解决方法

    这几天毕设要用到OpenCV,按照网上的教程来搭建开发环境. 用的是OpenCV 3.0 beta + Visual Studio Community 2013.我的系统64位是Win 8.1,但在加 ...

  8. spring加载过程中jar包加载不了,解决方法

    当我们在开发spring项目时,一般会将jar包放到webInf/lib下,这样是myeclipse自动将jar包加载到tomcat中webapps下,但是当我们新建一个lib文件夹的情况下,我们ad ...

  9. Visual studio 2017添加引用时报错未能正确加载ReferenceManagerPackage包的解决方法

    vs2017添加引用时报错未能正确加载“ReferenceManagerPackage”包. - AusonSir - 博客园https://www.cnblogs.com/-bao/p/674941 ...

随机推荐

  1. android AsynTask处理返回数据和AsynTask使用get,post请求

    Android是一个单线程模型,Android界面(UI)的绘制都只能在主线程中进行,如果在主线程中进行耗时的操作,就会影响UI的绘制和事件的响应.所以在android规定,不可在主线中进行耗时操作, ...

  2. 自己封装一个Log模块

    Unity自己有log系统,为什么要自己封装一个 1.不好用,只能在pc上记录log文件,移动平台是没有的 2.在开发时期的log,不想在正式版里面出现.没有一个统一的开关来控制是不是要显示log,要 ...

  3. 操作linux命令

    一.Linux下重启Tomcat 1. 进入tomcat下的bin目录:cd /user/standard/tomcat/bin; 使用关闭命令:./shutdown.sh; 查看Java进程是否关闭 ...

  4. 中科院Oracle 10G 数据库系统培训视频教程(828MB )

    中科院Oracle 10G 数据库系统培训视频教程(828MB  )第一章.安装及体系结构概述 Oracle数据库基础知识第二章.SQL*PLUS 基础.实例的创建启动与关闭第三章.SQL语言基础第四 ...

  5. java和php实现RSA加密互通-b

    java和PHP RSA加密实现互通 1:通过openssl 生成公钥和密钥文件(linux) (1)  生产私钥文件命令 openssl genrsa -out rsa_private_key.pe ...

  6. nopCommerce的源代码结构和架构

    下载地址 nopcommerce的源代码很容易拿到,它是开源的,所以你可以直接到网上下载.下载地址:http://www.nopcommerce.com/downloads.aspx 因为nop是国外 ...

  7. Deep Q-Network 学习笔记(一)—— Q-Learning 学习与实现过程中碰到的一些坑

    这方面的资料比较零散,学起来各种碰壁,碰到各种问题,这里就做下学习记录. 参考资料: https://morvanzhou.github.io/ 非常感谢莫烦老师的教程 http://mnemstud ...

  8. HDU-1151

    Air Raid Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  9. IOS开发之 -- 线程初识

    对于开发者来说,多线程永远有这一层神秘的色彩,似乎是一到迈步过去的坎,在同步.异步.串行.并行.死锁这几个名字当中,逐渐的放弃治疗,下面就多线程,谈一下自己的认识,理解的肯定不全面,只是一些简单的皮毛 ...

  10. Spark的广播变量模块

    有人问我,如果让我设计广播变量该怎么设计,我想了想说,为啥不用zookeeper呢? 对啊,为啥不用zookeeper,也许spark的最初设计哲学就是尽量不使用别的组件,他有自己分布式内存文件系统, ...