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. java 字符串—数字常用处理

    // 判断一个字符串是否都为数字 public boolean isDigit(String strNum) { return strNum.matches("[0-9]{1,}" ...

  2. arp_filter/arp_ignore/rp_filter

    下面这段代码应该是arp_ignore/arp_filter的最好的注脚;在ARP_ignore通过的情况下,我再去判断ARP_filter,这个ARP_filter其实就是为了判断,当数据包再出去的 ...

  3. 使用 ECS 实例创建 FTP 站点 linux

    本文只做记载过程和问题,并不详细 官方教程走一遍 https://help.aliyun.com/document_detail/51998.html#h2-linux-ftp-2 值得注意的是步骤二 ...

  4. 2018 杭电多校2 - Naive Operations

    题目链接 Problem Description In a galaxy far, far away, there are two integer sequence a and b of length ...

  5. 实用图像处理入门 - 1 - opencv VS2012 环境搭建

    标签中的部分 font-family: 华文细黑; font-size: 26px; font-weight: bold; color: #611427; margin-top:40px; } h2 ...

  6. BZOJ 1875 HH去散步(矩阵快速幂)

    题意: 给定一张无向图,每条路的长度都是1,没有自环,可能有重边,给定起点与终点,求从起点走t步到达终点的方案数. 每一步走的时候要求不能走上一条刚刚走的路. 解析: 显然需要搞出个矩阵之后矩乘. 然 ...

  7. Go语言【第七篇】:Go函数

    Go语言函数 函数是基本的代码块,用于执行某个任务.Go语言最少有个main()函数,可以通过函数来划分不同功能,逻辑上每个函数执行的是指定的任务.函数声明告诉了编译器函数的名称,返回类型和参数.Go ...

  8. [LOJ #6433]「PKUSC2018」最大前缀和

    题目大意:给你一个$n(n\leqslant20)$项的数列$A$,设重排后的数列为$A'$,令$pre_p=\sum\limits_{i=1}^pA'_i$,求$max\{pre_i\}$的期望,乘 ...

  9. CF9d How many trees?

    题意:求节点数为n的,高度大于等于h的二叉树的个数. 题解: 一开始没看到二叉树的限制,,,想了好久.因为数据范围很小,所以可以考虑一些很暴力的做法. 有2种DP方式都可以过. 1,f[i][j]表示 ...

  10. cdh版本的sqoop安装以及配置

    sqoop安装需要提前安装好sqoop依赖:hadoop .hive.hbase.zookeeper hadoop安装步骤请访问:http://www.cnblogs.com/xningge/arti ...