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. An Introduction to Lock-Free Programming

    Lock-free programming is a challenge, not just because of the complexity of the task itself, but bec ...

  2. 【Python】Python time mktime()方法

    描述 Python time mktime() 函数执行与gmtime(), localtime()相反的操作,它接收struct_time对象作为参数,返回用秒数来表示时间的浮点数. 如果输入的值不 ...

  3. BZOJ 1597 土地购买(斜率优化DP)

    如果有一块土地的长和宽都小于另一块土地的长和宽,显然这块土地属于“赠送土地”. 我们可以排序一下将这些赠送土地全部忽略掉,一定不会影响到答案. 那么剩下的土地就是长递减,宽递增的.令dp[i]表示购买 ...

  4. Codeforces Round #522 Div. 1 没打记

    开场被A劝退,写了得有50min于是不敢交了.unrated了喜闻乐见. A:瞎猜都能猜到如果要走到那条直线上,进入直线的点横坐标或纵坐标与起点相同,离开直线的点横坐标或纵坐标与终点相同,证明脑补一下 ...

  5. CentOS7 防火墙配置firewall-cmd

    firewalld(Dynamic Firewall Manager of Linux systems,Linux系统的动态防火墙管理器)服务是默认的防火墙配置管理工具. firewall-cmd 是 ...

  6. POJ1228:Grandpa's Estate——题解

    http://poj.org/problem?id=1228 题目大意:给一个凸包,问是否为稳定凸包. ———————————————————————— 稳定凸包的概念为:我任意添加一个点都不能使这个 ...

  7. react设置默认state和默认props

    1.默认状态设置 1.constructor (ES6) constructor(props) { this.state = { n: ... } } 2.getInitialState (ES5) ...

  8. 51nod 1275 连续子段的差异(twopointer+单调队列)

    对于每一个i找到最近的j满足最大值-最小值>K,对答案的贡献为j-i,用单调队列维护最值即可 #include<iostream> #include<cstdlib> # ...

  9. [LOJ 6004] 圆桌聚餐

    link 其实网络流就是再考你如何去建边. 先见$S$,$T$为源点与汇点,然后将$S$连向每一个单位,流量为每个单位的人数,然后将每一个单位连向每一个餐桌,流量为$1$,最后在将每一个餐桌与$T$相 ...

  10. 牛客练习赛42 出题的诀窍(数学+hash)

    出题的诀窍 题目链接:https://ac.nowcoder.com/acm/contest/393/C 题解: 由于他是在每一行选取一个元素,然后纵向来比较,这里行的顺序是不会影响的,所以我们将每一 ...