Vue.js项目中,当图片无法显示时则显示默认图片
来源:互联网 发布:网络机顶盒电视直播软件下载 编辑:程序博客网 时间:2024/05/18 00:48
最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片
本人试了3种方法,2种方法失败了
失败方法一:见博客:http://blog.csdn.net/qq_32786873/article/details/53483951
失败方法二:直接把图片路径直接写在data里面作为变量传到模板中,但是却发现图片还是出不了,以为是图片路径的问题,查了半天才发现项目启动后图片的路径并不是我们写的路径了。比如我们写的图片路径是:../assets/img.png,但是在网页开发者工具查看时路径却是:/static/img/img.4aa0af1.png,也就是说图片路径是有变化的。
解决方法(在方法二的基础上改进的):
使用require将图片进入,写法如下:
data: () => ({ logo: 'this.src="' + require('../assets/img.png') + '"'})
注:我是在data里就将字符串拼接好了,当然也可以在onerror方法里拼接,这里就不赘述了。
然后在img的onerror方法中调用:
<img v-bind:src="userData.photo" :onerror="logo" class="img-box4">
在v-bind标签中,单引号' '引用的内容作为字符串存在;双引号" "引用的内容作为变量/表达式存在,可以进行运算。
4 0
- Vue.js项目中,当图片无法显示时则显示默认图片
- Vue.js项目中,当图片无法显示时则显示默认图片
- vue项目中,图片无法显示时,显示默认图片,但默认图片路径出错
- 当图片不存在时显示默认图片
- vue.js图片无法显示问题总结
- js显示默认图片
- angular 背景图片,当图片不存在时显示默认图片
- vue--当从后台加载的图片出错时显示默认的图片
- 当显示图片出错时显示为默认图片
- JS实现图片不存在时显示默认图片
- Vue项目,当图片加载错误时,用默认图片代替
- 当img没有图片时候,显示默认图片代码
- vue打包项目后正确显示图片
- 图片无法显示时,js实现 暂无图片效果
- RadioButton中无法显示图片?
- jquery实现当修改上传的图片时,默认显示当前图片的名称,当选择新的图片时,显示最新的图片名称
- google chrome当图片不显示时,默认显示边框的解决办法
- 图片不存在时,显示默认图片
- centos7下安装mysql
- 【记录算法题之路】剑指offer--二维数组中的查找
- Codeforces Round #408 (Div. 2) D. Police Stations 最短路、BFS
- POJ
- Java synchronized
- Vue.js项目中,当图片无法显示时则显示默认图片
- 使用gdb调试php程序
- windows 环境下基于Python 的GDAL 安装
- 强/软/弱/虚引用和强/弱类型
- U盘启动制作教程
- [kuangbin带你飞]专题一 简单搜索-C
- 登录记住用户名密码
- 第三人称蓝图控制
- Algorithm-Gossip(3) 巴斯卡三角形