vue 动态获取的图片路径不显示_Vue 动态图片加载路径问题和解决方法
最近在做一个树形结构的组件,使用了Vue和element UI中el-tree组件。因为树中每个节点都需要显示一个图标图片,并且需要根据后台传入的数据类型动态地显示,所以图片的路径需要动态地加载。下面是核心组件代码:
{{ node.label }}
后台交互使用了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
这个方案比较简单,
只要保证数据是正确的,这个方案是完全可以的。
方案二:使用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组件为例,我们可以这样写:
{{node.label}}
methods: {
getUrl(url) {
return require(`@/assets/resourceimage/${url}.png`);
}
}
这个用法比较简单,它把computed的计算结果——也就是tree绑定到el-tree的data上,这样就可以使用内部的node使用tree中的数据了。
切记不要使用下面的记住写法:
require('@/assets/resourceimage/'+${node.icon}'+'.png');
require('@/assets/resourceimage/'+{{node.icon}}'+'.png');
vue 动态获取的图片路径不显示_Vue 动态图片加载路径问题和解决方法相关推荐
- vue 页面闪烁的问题_vue页面加载闪烁问题的解决方法
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v- ...
- vue开发手机页面闪烁_Vue页面加载闪烁问题的解决方法_婳祎_前端开发者
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换 也就是说,在使用v-if时,若值为false,那 ...
- 计算机登录界面没有用户显示不出来,电脑开机时提示用户界面失败:无法加载登录用户界面的解决方法...
在电脑开机之后,弹出了错误的提示"用户界面失败:无法加载登录用户界面"无法加载某个DLL文件,导致了电脑无法正常开机,不知道如何解决,下面装机之家分享一下电脑开机时提示用户界面失败 ...
- 图片链接直接打开显示正常,放在img标签里就加载不出来的解决方法
因为从图片的链接是第三方地址,所以在有些浏览器可以会不兼容,导致不显示图片,比如谷歌不行,火狐却可以 <img src="https://t7.baidu.com/it/u=18192 ...
- vue3本地图片加载不出来,解决方法
先引入本地图片 直接应用
- 电脑显示服务器未能登陆 无法加载用户配置,win7系统提示User Profile Service服务未能登录,无法加载用户配置文件的解决方法...
很多小伙伴都遇到过win7系统提示User Profile Service服务未能登录,无法加载用户配置文件的困惑吧,一些朋友看过网上零散的win7系统提示User Profile Service服务 ...
- html5 循环加载图片,解决vue的 v-for 循环中图片加载路径问题
先看一下产品需求,如下图所示, 产品要求图片和它的名称一一对应,本来是非常简单的需求,后台直接返回图片路径和名称,前台直接读取就可以了,但是我们没有存储图片的服务器,再加上是一个实验性的需求,图片需要 ...
- vue的v-for循环中图片加载路径问题
vue的v-for循环中图片加载路径问题 产品要求 要求图片和它的名字一一对应, vue中的img的src可以动态绑定到一个变量上 <template> <div><ul ...
- jsp怎么从后台读取远程共享文件夹下的图片在前端显示_Vue后台项目中遇到的技术难点以及解决方案
作者:yeyan1996 转发链接:https://juejin.im/post/5c76843af265da2ddd4a6dd0 写在前面 金三银四招聘时间已经过去,很多公司开启了今年第二轮招聘的热 ...
最新文章
- R语言dataframe(data.table)使用用最近的前一个非NA值向前填充缺失值NA实战
- js技巧--转义符\的妙用
- 用于计算机视觉领域的python第三方库是什么_大量Python开源第三方库资源分类整理,含菜鸟教程章节级别链接...
- 中国开封菊花花会照片1
- 创建透明窗口及其应用--屏幕画笔
- 迅雷(XUNLEI)的工作原理揭密(续)---突出重围
- 五款好评如潮的手机APP分享 用起来绝对好用!
- 什么是医疗物联网(IoMT)?
- PHP 函数截图 哈哈哈
- mysql 联合主键_深入理解Mysql索引底层数据结构与算法,背后的故事
- linux for循环原理,linux for循环
- Disruptor学习笔记
- 抗衡微软,UCDOS失策了,金山系软件完胜,不是WPS
- 如何政治正确地黑中国玄幻小说?!
- layui调用相册功能和点击按钮调用相册功能
- My Thirty-Second Page - 对称二叉树 - By Nicolas
- python 高斯过程_1.7. 高斯过程
- python风变编程培训骗局
- 这次把怎么做好一个PPT讲清-演讲篇
- acw - 4262.空调