vue中当图片地址无效的时候,显示默认图片的方法


Posted in Javascript onSeptember 18, 2018

web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况。这时候,图片就会显示一个叉。

对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址。

<img :src="item.img" @error="imgError(item)" />

给图片添加一个error校验,当图片加载失效的时候,就会调用该属性的方法。

在methods中添加如下方法:

imgError(item) {
  item.img = require('../../assets/img-default.png');
}

在方法中修改图片的地址为默认图片的地址。

当前端通过接口从后台获取到图片的地址参数后,该参数很可能会为null,对于这种情况,我们应该做一个判断,如果该图片地址不存在,那么直接赋值一个默认的图片地址,如果该图片的地址存在,但是链接后没有获得图片,那么,这种情况就可以采用上述的方法进行完善。

以上这篇vue中当图片地址无效的时候,显示默认图片的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
brook javascript框架介绍
Oct 10 Javascript
jQuery prev ~ siblings选择器使用介绍
Aug 09 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
Jquery实现瀑布流布局(备有详细注释)
Jul 31 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
JS实现简易刻度时钟示例代码
Mar 11 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
javascript实现前端分页效果
Jun 24 Javascript
vue动态设置img的src路径实例
Sep 18 #Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 #Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 #Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 #Javascript
vue自定义tap指令及tap事件的实现
Sep 18 #Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 #Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 #Javascript
You might like
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
2016/04/06 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
domReady的实现案例
2016/11/23 Javascript
Angular2库初探
2017/03/01 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
2019/05/16 Javascript
Python生成验证码实例
2014/08/21 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
个人求职简历的自我评价
2013/10/19 职场文书
高中生自我鉴定范文
2013/10/30 职场文书
药学专业个人的自我评价
2013/12/31 职场文书
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
高一英语教学反思
2016/03/03 职场文书
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
关于Vue中的options选项
2022/03/22 Vue.js