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 相关文章推荐
Opacity.js
Jan 22 Javascript
jQuery Ajax 全解析
Feb 08 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
jQuery setTimeout()函数使用方法
Apr 07 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
一个SQL管理员的web接口
2006/10/09 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php file_get_contents函数轻松采集html数据
2010/04/22 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
基于jQuery实现的图片切换焦点图整理
2014/12/07 Javascript
jquery.cookie.js用法实例详解
2015/12/25 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python在线运行代码助手
2016/07/15 Python
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python global全局变量函数详解
2018/09/18 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python开根号实例讲解
2020/08/30 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
毕业生求职信的经典写法
2014/01/31 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
师德师风学习材料
2014/12/19 职场文书
爱心捐书倡议书
2015/04/27 职场文书
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android