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 相关文章推荐
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
基于bootstrop常用类总结(推荐)
Sep 11 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
Mar 15 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
Javascript var变量删除原理及实现
Aug 26 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中用文本文件做数据库的实现方法
2008/03/27 PHP
在PHP中操作Excel实例代码
2010/04/29 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue2.0 根据状态值进行样式的改变展示方法
2018/03/13 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
用 python 进行微信好友信息分析
2020/11/28 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
小学教师的个人自我鉴定
2013/10/26 职场文书
建议书怎么写
2014/03/12 职场文书
党建工作经验交流材料
2014/05/25 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
mysql 索引合并的使用
2021/08/30 MySQL
基于Redission的分布式锁实战
2022/08/14 Redis