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'" ...
随机推荐
- MAC 安装jenkins
下载地址 : https://jenkins.io/zh/download/ 由于用dmg安装包去安装jenkins,Jenkins不会用本地的用户去构建,任何创建的文件都是“jenkins”用户所有 ...
- 20150722---点击按钮使指定的控件可见部分平移(JS)
前段代码: <div id="out" style=" width:400px;overflow:hidden;"> <div id=&quo ...
- IsAjaxRequest
具体来说,IsAjaxRequest代码可以分解为以下功能: public static bool IsAjaxRequest(this HttpRequestBase request) { if ( ...
- 【ABAP系列】SAP ABAP模块-取整操作中CEIL和FLOOR用法
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP模块-取整操作中 ...
- Java中的基本类型和包装类型区别
首先看一下几个测试题,验证一下java中对基本类型和包装类型的理解,看看最后输出的答案对不对,答案在这篇博客中哦: // 第一题: 基本类型和包装类型 int a = 100; Integer b = ...
- E-puck简单入门
E-puck是瑞士的一款小型的机器人,可以用于教学和实验,其外形小巧,并且整个结构也比较简单,如果出现损坏也比较容易维护. 其外形如下: 因为国内的资料很少,资料主要还是通过官方文档了解,而官方的文档 ...
- 洛谷 P1972 [SDOI2009]HH的项链(树状数组,离线)
传送门 解题思路 因为是求区间的不同种类数,所以我们用树状数组(貌似并没有什么直接联系) (...表示到) 还是和原来一样,用s[i]来表示a[i-lowbit(i)]...a[i]的种类数. 因为有 ...
- python学习第五天--函数进阶
局部变量与全局变量下面代码中,old_price,rite为全局变量,final_price为局部变量 globals() 声明全局变量,在函数内可修改函数外的变量 内嵌函数:函数当中嵌套函数 闭包: ...
- sshpass非交互SSH密码验证
1.yum安装yum install sshpass -y1.1编译安装yum install wget -ywget http://sourceforge.net/projects/sshpass/ ...
- 查询sqlserver中表信息
ALTER PROCEDURE [dbo].[GetTableInfo] @tableName NVARCHAR(MAX) AS BEGIN SELECT -- CASE -- WHEN col.co ...