vue图片加载与显示默认图片实例代码


Posted in Javascript onMarch 16, 2017

本文实例为大家分享了vue图片加载与显示默认图片的具体代码,供大家参考,具体内容如下

HTML:

<div class="content-show-img">
<div class="show-img">


<img class="default-image" :src="data.image" @load="successLoadImg" @error="errorLoadImg">

</div>
</div>

JS:

Vue.prototype.successLoadImg = function(event) {
  if (event.target.complete == true) {
    event.target.classList.remove("default-image");;
    var imgParentNode = event.target.parentNode;
    if(imgParentNode.classList.contains('show-img')==true){
      imgParentNode.style.background = "#000";
    }
  }
};
Vue.prototype.errorLoadImg = function(event) {
  event.target.classList.add("default-image");;
};

针对尺寸不统一的:先显示默认图片,加载成功时移除默认图片,填充背景。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
IE 缓存策略的BUG的解决方法
Jul 21 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
浅谈window.onbeforeunload() 事件调用ajax
Jun 29 Javascript
Bootstrap表单使用方法详解
Feb 17 Javascript
页面点击小红心js实现代码
May 26 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
JS利用prototype给类添加方法操作详解
Jun 21 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 Javascript
js中作用域的实例解析
Mar 16 #Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 #Javascript
JS实现页面打印功能
Mar 16 #Javascript
Vue中添加过渡效果的方法
Mar 16 #Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 #Javascript
js实现瀑布流效果(自动生成新的内容)
Mar 16 #Javascript
es6的数字处理的方法(5个)
Mar 16 #Javascript
You might like
类的另类用法--数据的封装
2006/10/09 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
javascript 日期时间函数(经典+完善+实用)
2009/05/27 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
Angular 理解module和injector,即依赖注入
2016/09/07 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python多线程学习资料
2012/12/19 Python
Python3 能振兴 Python的原因分析
2014/11/28 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
Python 炫技操作之合并字典的七种方法
2020/04/10 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
机电专业毕业生求职信
2013/10/27 职场文书
开业庆典邀请函
2014/01/08 职场文书
发展部经理职责规定
2014/02/22 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
十二生肖观后感
2015/06/12 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
pandas中DataFrame重置索引的几种方法
2021/05/24 Python
Go获取两个时区的时间差
2022/04/20 Golang