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中的图片加载与显示默认图片的更多相关文章

  1. JS图片加载失败显示默认图片

    代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...

  2. js解决img标签加载失败显示默认图片

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

  3. vue中img图片加载中以及加载失败显示默认图片问题

    加载中默认图片:主要是onload事件监听,data中定义变量 imgSrc :require('./default.png'): <div class="per-pic" ...

  4. JS图片加载失败用默认图片代替

    1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为 指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. ...

  5. vue 中监测滚动条加载数据(懒加载数据)

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  6. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  7. 当图片加载失败时更换图片, Firefox onerror 报错

    当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...

  8. JS检查当图片不存在时显示默认图片和键盘大小写键状态

    当图片不存在时显示默认图片 <script type="text/javascript"> var imgs = document.images; for(var i ...

  9. 从代码分析Android-Universal-Image-Loader的图片加载、显示流程

    从UNIVERSAL IMAGE LOADER. PART 3(四个DisplayImage重载方法详解)中,我们学习了Android-Universal-Image-Loader(以下简称UIL)中 ...

随机推荐

  1. RPC-原理及RPC实例分析

    还有就是:RPC支持的BIO,NIO的理解 (1)BIO: Blocking IO;同步阻塞: (2)NIO:Non-Blocking IO, 同步非阻塞; 参考:IO多路复用,同步,异步,阻塞和非阻 ...

  2. java从远程服务器获取PDF文件并后台打印(使用pdfFox)

    一.java原生方式打印PDF文件 正反面都打印,还未研究出只打印单面的方法,待解决 public static void printFile(String path) throws Exceptio ...

  3. 【bzoj2004】[Hnoi2010]Bus 公交线路 状压dp+矩阵乘法

    题目描述 小Z所在的城市有N个公交车站,排列在一条长(N-1)km的直线上,从左到右依次编号为1到N,相邻公交车站间的距离均为1km. 作为公交车线路的规划者,小Z调查了市民的需求,决定按下述规则设计 ...

  4. BZOJ4810 Ynoi2017由乃的玉米田(莫队+bitset)

    多组询问不强制在线,那么考虑莫队.bitset维护当前区间出现了哪些数,数组记录每个数的出现次数以维护bitset.对于乘法,显然应有一个根号范围内的因子,暴力枚举即可.对于减法,a[i]-a[j]= ...

  5. OracleHelp以及其简单应用

    我自己写的简单的OracleHelp <?xml version="1.0" encoding="utf-8" ?> <configurati ...

  6. Creator开源游戏、插件、教程、视频汇总

    Creator开源游戏.插件.教程.视频汇总 来源 http://forum.cocos.com/t/creator/44782 王哲首席客服   17-03-17    4   史上最全,没有之一. ...

  7. Git的安装与使用(一)

    闲来无事写了个小demo,想上传到GitHub上,发现得使用git进行上传,所以得先了解下git . 1.git是什么 分布式版本控制器 2.svn与git的区别 svn:是集中式的版本控制系统,版本 ...

  8. PyTorch为何如此高效好用?

    C/C++中 Python 扩展对象的简介 你可能知道可以借助 C/C++扩展 Python,并开发所谓的「扩展」.PyTorch 的所有繁重工作由 C/C++实现,而不是纯 Python.为了定义 ...

  9. BZOJ3343 & 洛谷2801:教主的魔法——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=3343 https://www.luogu.org/problemnew/show/2801 题目描述 ...

  10. 欢迎大家收听喜马拉雅,我的主播频道http://m.ximalaya.com/weizhubo/44966139

    关注光荣之路软件技术培训账号,即时收取测试开发技术的免费公开课信息,各大公司测试及开发招聘信息.最新的技术咨询.线下测试 喜马拉雅微电台,每天早晨光荣之路创始人吴老,都会跟大家一起分享测试行业心得体会 ...