vue中img图片加载中以及加载失败显示默认图片问题
加载中默认图片:
主要是onload事件监听,data中定义变量
imgSrc :require('./default.png');
<div class="per-pic" v-for="(item, index) in picData" :key="index">
<img :src="imgSrc" :onload="loadImg(item.url)" />
</div>
/*
**图片加载中
* */
loadImg($img){
return 'this.οnlοad=null;this.src='+'"'+$img+'";';
}, 加载失败目前网上很多都是用onerror事件监听,然后给this.src赋值,压根不管用啊,试了半天不管用。
用css倒是能轻松解决,具体代码如下:
img{
width: 145px; height: 145px;
position: relative;
&:after{
content: "";
display: inline-block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 145px;
background: url("./default.png") no-repeat;
background-size: 100% ;
background-color: #fff;
}
}; 觉得好用的,请点赞,蟹蟹。
vue中img图片加载中以及加载失败显示默认图片问题的更多相关文章
- js解决img标签加载失败显示默认图片
问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...
- img 加载网络图片失败 显示默认图片
1. 概述 当从网络加载图片失败 希望显示默认图 img 标签有个 onerror属性 2. 代码 2.1 java服务端组织标签整个返回前端 String imgUrl = "javasc ...
- JS图片加载失败显示默认图片
代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...
- vue中的图片加载与显示默认图片
HTML: <div class="content-show-img"> <div class="show-img"> <img ...
- Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)
之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...
- Jquery判断页面图片是否加载失败,加载失败则显示默认图片
例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
- 在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片
很多时候,在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片.可以通过以下方式: <img src="xxx.jpg" onError="th ...
- 在Windows7中打开照片,提示“Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足。....”
在Windows7中打开照片,提示"Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足.请关闭一些目前没有使用的程序或者释放部分硬盘空间(如果硬盘几乎已满),然后重试. ...
- img如果没有图片显示默认图片效果
img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" ...
随机推荐
- 如何获取url里面的参数
想必大家经常会遇到这样的问题吧,每次获取url参数的时候就一阵头疼,那现在我就教大家一个简单的方法,将url的参数转换成一个对象,用的时候直接用对象点出来就好了.不多说,直接上代码 function ...
- 在Python中操作文件之truncate()方法的使用教程
在Python中操作文件之truncate()方法的使用教程 这篇文章主要介绍了在Python中操作文件之truncate()方法的使用教程,是Python入门学习中的基础知识,需要的朋友可以参考下 ...
- Memecached 服务器安装(一)
Memecached 服务器安装(一) 前提:首先您的php环境已经安装完成,如若没有则参考 http://www.cnblogs.com/xulele/p/5264781.html 安装环境链接:h ...
- [LeetCode] 477. Total Hamming Distance(位操作)
传送门 Description The Hamming distance between two integers is the number of positions at which the co ...
- 20190815 On Java8 第五章 控制流
第五章 控制流 迭代语句 逗号操作符 在 Java 中逗号运算符(这里并非指我们平常用于分隔定义和方法参数的逗号分隔符)仅有一种用法:在 for 循环的初始化和步进控制中定义多个变量.我们可以使用逗号 ...
- ichunqiu在线挑战--网站综合渗透实验 writeup
挑战链接:http://www.ichunqiu.com/tiaozhan/111 知识点:后台弱口令,md5破解,SQL Injection,写一句话木马,敏感信息泄露, 提权,登陆密码破解 这个挑 ...
- SAP smartforms打印数据出框线或跟框线重叠,但是预览是正常的
如图,打印内容压在框线上,但是打印预览是正常的 预览图如下,预览是正常的 预览用PDF!命令,导出PDF,也是正常的,就直接打印有问题,不是打印机的问题,用Adobe PDF打印机也是不行 如果只有一 ...
- Java中的I/O
1.Java中的I/O分类 I/O分类: 输入流,输出流,或者字节流,字符流 I/O中的四个抽象基类: InputStream,OutputStream:两者属于字节流,前者输入,后者输出.一般后缀名 ...
- smarty中判断数组是否为空的方法
1,用count来取得数组的下标个数 下面例子中,如果$array为空则不输出任何数据 以下为引用的内容:{if $array|@count neq 0 }... ...{/if} 2,直接来判断 以 ...
- SQL SERVER添加表注释、字段注释
--为字段添加注释 --Eg. execute sp_addextendedproperty 'MS_Description','字段备注信息','user','dbo','table','字段所属的 ...