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 相关文章推荐
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
理解javascript封装
Feb 23 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
layui select动态添加option的实例
Mar 07 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
Aug 03 Javascript
最新最全的手机号验证正则表达式
Feb 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
推荐一款PHP+jQuery制作的列表分页的功能模块
2014/10/14 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
js数组常用最重要的方法
2018/02/04 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
详解在Python程序中自定义异常的方法
2015/10/16 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
python版本的仿windows计划任务工具
2018/04/30 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
python文件和文件夹复制函数
2020/02/07 Python
python实现扫雷游戏的示例
2020/10/20 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
介绍一下SOA和SOA的基本特征
2016/02/24 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
秋季运动会稿件
2014/01/30 职场文书
优秀教师工作感言
2014/02/16 职场文书
眼镜促销方案
2014/03/15 职场文书
中级会计大学生职业生涯规划书
2014/09/16 职场文书
西安导游词
2015/02/12 职场文书
2015年大学生工作总结
2015/04/21 职场文书