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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
详解vuex的简单使用
Mar 12 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
在 HTML 页面中使用 React的场景分析
Jan 18 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
PHP扩展编写点滴 技巧收集
2010/03/09 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
在JavaScript中实现命名空间
2006/11/23 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
深入理解js promise chain
2016/05/05 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python 中pandas.read_excel详细介绍
2017/06/23 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
详解Python中的文件操作
2021/01/14 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
购买一个高级域名:BuyDomains
2018/03/11 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
一套带网友答案的.NET笔试题
2016/12/06 面试题
汽车销售求职自荐信
2013/10/01 职场文书
先进事迹报告会感言
2014/01/24 职场文书
业绩考核岗位职责
2014/02/01 职场文书
财务总监管理职责范文
2014/03/09 职场文书
买房委托公证书
2014/04/08 职场文书
2014年团总支工作总结
2014/11/21 职场文书
员工辞职信范文
2015/03/02 职场文书
小学校园广播稿
2015/08/18 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python