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 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
javascript中JSON对象与JSON字符串相互转换实例
Jul 11 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
小程序使用wxs解决wxml保留2位小数问题
Dec 13 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 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
11个PHP 分页脚本推荐
2011/08/15 PHP
有关phpmailer的详细介绍及使用方法
2013/01/28 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
2018/02/26 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
js实现飞机大战游戏
2020/08/26 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中defaultdict的用法详解
2017/06/07 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
使用python实现对元素的长截图功能
2019/11/14 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
python如何变换环境
2020/07/21 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
电信专业应届生自荐信
2013/09/28 职场文书
音乐表演专业毕业生求职信
2013/10/14 职场文书
运动会广播稿300字
2014/01/10 职场文书
初中军训感想300字
2014/03/05 职场文书
协会周年庆活动方案
2014/08/26 职场文书
市场营销工作计划书
2014/09/15 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
接触艺术对孩子学习思维有益
2019/08/06 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
Python可变与不可变数据和深拷贝与浅拷贝
2022/04/06 Python