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)中 ...
随机推荐
- 微信抢红包软件-android
微信红包不错的分析: 附带源码 并包含了源码 参考: Android中微信抢红包助手的实现 (1) https://www.jianshu.com/p/19ddd41aa349 (2) http:// ...
- 修改MSSQL字段类型
update Data_Project set SyncTime=NULL; alter table Data_Project alter column SyncTime datetime; upda ...
- springBoot配置分析(属性和结构化)
使用idea自带插件创建项目 一直下一步到完成 application.properties local.ip.addr = 192.168.2.110 redis.host = 192.168.3. ...
- Go语言【第十二篇】:Go数据结构之:切片(Slice)、范围(Range)、集合(Map)
Go语言切片(Slice) Go语言切片是对数组的抽象,Go数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数 ...
- 新版chrome touch警告处理办法
最近做项目经常在 chrome 的控制台看到如下提示: Unable to preventDefault inside passive event listener due to target bei ...
- 整合常用功能的JS小组件库-v1.0
function Alex() { //给予video.js的页面滚动到视频元素范围内自动播放/出范围暂停播放-----01 this.video_autoplay = function (box) ...
- IntelliJ IDEA2018注册
第一步:0.0.0.0 account.jetbrains.com及0.0.0.0 www.jetbrains.com 添加到hosts文件 第二步:进入 http://idea.lanyus.co ...
- [牛客练习赛29D]禁止动规
description newcoder 你在一个无限长的数轴上,一开始你在原点 本来你只有两种操作:向左dp,以及向右dp 然而由于禁止dp 于是你只能另寻出路 万幸的是,dp之神随机给了你n个变量 ...
- BZOJ3521 [Poi2014]Salad Bar 【线段树 + 单调栈】
题目链接 BZOJ3521 题解 容易想到用前缀和搞 如果我们令\(p\)为\(1\),\(j\)为\(-1\),记前缀和为\(s[i]\) 我们就是要找到一段区间\([l,r]\),使得 \[\fo ...
- HDOJ(HDU).2044-2049 递推专题
HDOJ(HDU).2044-2049 递推专题 点我挑战题目 HDU.2044 题意分析 先考虑递推关系:从1到第n个格子的时候由多少种走法? 如图,当n为下方格子的时候,由于只能向右走,所以有2中 ...