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");;
};
针对尺寸不统一的:先显示默认图片,加载成功时移除默认图片,填充背景。
vue中的图片加载与显示默认图片的更多相关文章
- JS图片加载失败显示默认图片
代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
- vue中img图片加载中以及加载失败显示默认图片问题
加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...
- JS图片加载失败用默认图片代替
1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为 指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. ...
- vue 中监测滚动条加载数据(懒加载数据)
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- js判断图片加载完成后获取图片实际宽高
通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...
- 当图片加载失败时更换图片, Firefox onerror 报错
当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...
- JS检查当图片不存在时显示默认图片和键盘大小写键状态
当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...
- 从代码分析Android-Universal-Image-Loader的图片加载、显示流程
从UNIVERSAL IMAGE LOADER. PART 3(四个DisplayImage重载方法详解)中,我们学习了Android-Universal-Image-Loader(以下简称UIL)中 ...
随机推荐
- java中多种方式读文件
转自:http://www.jb51.net/article/16396.htm java中多种方式读文件 一.多种方式读文件内容. 1.按字节读取文件内容 2.按字符读取文件内容 3.按行读取文件内 ...
- [计算机网络] DNS何时使用TCP协议,何时使用UDP协议
DNS同时占用UDP和TCP端口53是公认的,这种单个应用协议同时使用两种传输协议的情况在TCP/IP栈也算是个另类.但很少有人知道DNS分别在什么情况下使用这两种协议. 先简单介绍下TCP与UDP. ...
- linux 装redmine
看第一篇 https://www.cnblogs.com/iluzhiyong/p/redmine.html 看第二篇 http://blog.51yip.com/cloud/1874.html 基本 ...
- java从远程服务器获取PDF文件并后台打印(使用pdfFox)
一.java原生方式打印PDF文件 正反面都打印,还未研究出只打印单面的方法,待解决 public static void printFile(String path) throws Exceptio ...
- BZOJ 2306 幸福路径(DP)
题解来源:http://www.cnblogs.com/jianglangcaijin/p/3799494.html 最后必然是走了一条链,或者是一个环(一直绕),或者是一条链加一个环.设f[i][j ...
- URL 编码规则
规则: 1.将空格转换为加号(+) 2.对0-9.a-z.A-Z之间的字符保持不变 3.对于所有其他的字符,用这个字符的当前当前字符集编码在内存中的十六进制格式表示,并在每一个字节前加上一个百分号(% ...
- [AHOI2009]最小割 最小割可行边&必须边
~~~题面~~~ 题解: 做这题的时候才知道有最小割可行边和必须边这种东西..... 1,最小割可行边, 意思就是最小割中可能出现的边. 充要条件: 1,满流 2,在残余网络中找不到x ---> ...
- 【转】TCP拥塞控制,慢启动、拥塞避免、快重传以及快恢复
转自:http://blog.csdn.net/yusiguyuan/article/details/22847787 注:本文绝大部分是来自转载的博客,还补充了少量内容. 一.TCP的拥塞控制 拥塞 ...
- AOJ.866 飞越原野 (三维BFS)
AOJ.866 飞越原野 (三维BFS) 题意分析 点我挑战题目 相比于普通的BFS,要多一维来记录当前剩余的体力.而且还要额外的一层循环来处理,飞过的路程. 代码总览 #include <io ...
- bzoj3232圈地游戏——0/1分数规划+差分建模+判环
Description DZY家的后院有一块地,由N行M列的方格组成,格子内种的菜有一定的价值,并且每一条单位长度的格线有一定的费用. DZY喜欢在地里散步.他总是从任意一个格点出发,沿着格线行走直到 ...