加载中默认图片:
主要是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图片加载中以及加载失败显示默认图片问题的更多相关文章

  1. js解决img标签加载失败显示默认图片

    问题: 为所有显示楼盘的页面添加一个加载失败的默认图片. 基本思路: img标签中有个onerror属性,专门用来处理加载失败的事件.所以可以用jquery添加onerror属性,在onerror中加 ...

  2. img 加载网络图片失败 显示默认图片

    1. 概述 当从网络加载图片失败 希望显示默认图 img 标签有个 onerror属性 2. 代码 2.1 java服务端组织标签整个返回前端 String imgUrl = "javasc ...

  3. JS图片加载失败显示默认图片

    代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...

  4. vue中的图片加载与显示默认图片

    HTML: <div class="content-show-img"> <div class="show-img"> <img ...

  5. Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

  6. Jquery判断页面图片是否加载失败,加载失败则显示默认图片

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  7. 在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片

    很多时候,在HTML中显示图片时希望如果图片不存在或者无法显示时,能够显示默认图片.可以通过以下方式: <img src="xxx.jpg" onError="th ...

  8. 在Windows7中打开照片,提示“Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足。....”

    在Windows7中打开照片,提示"Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足.请关闭一些目前没有使用的程序或者释放部分硬盘空间(如果硬盘几乎已满),然后重试. ...

  9. img如果没有图片显示默认图片效果

    img如果没有图片显示默认图片效果<img src="本来要显示的图片URL" onerror="this.src='图片挂了的话要显示的默认图片URL'" ...

随机推荐

  1. 如何获取url里面的参数

    想必大家经常会遇到这样的问题吧,每次获取url参数的时候就一阵头疼,那现在我就教大家一个简单的方法,将url的参数转换成一个对象,用的时候直接用对象点出来就好了.不多说,直接上代码 function ...

  2. 在Python中操作文件之truncate()方法的使用教程

    在Python中操作文件之truncate()方法的使用教程 这篇文章主要介绍了在Python中操作文件之truncate()方法的使用教程,是Python入门学习中的基础知识,需要的朋友可以参考下 ...

  3. Memecached 服务器安装(一)

    Memecached 服务器安装(一) 前提:首先您的php环境已经安装完成,如若没有则参考 http://www.cnblogs.com/xulele/p/5264781.html 安装环境链接:h ...

  4. [LeetCode] 477. Total Hamming Distance(位操作)

    传送门 Description The Hamming distance between two integers is the number of positions at which the co ...

  5. 20190815 On Java8 第五章 控制流

    第五章 控制流 迭代语句 逗号操作符 在 Java 中逗号运算符(这里并非指我们平常用于分隔定义和方法参数的逗号分隔符)仅有一种用法:在 for 循环的初始化和步进控制中定义多个变量.我们可以使用逗号 ...

  6. ichunqiu在线挑战--网站综合渗透实验 writeup

    挑战链接:http://www.ichunqiu.com/tiaozhan/111 知识点:后台弱口令,md5破解,SQL Injection,写一句话木马,敏感信息泄露, 提权,登陆密码破解 这个挑 ...

  7. SAP smartforms打印数据出框线或跟框线重叠,但是预览是正常的

    如图,打印内容压在框线上,但是打印预览是正常的 预览图如下,预览是正常的 预览用PDF!命令,导出PDF,也是正常的,就直接打印有问题,不是打印机的问题,用Adobe PDF打印机也是不行 如果只有一 ...

  8. Java中的I/O

    1.Java中的I/O分类 I/O分类: 输入流,输出流,或者字节流,字符流 I/O中的四个抽象基类: InputStream,OutputStream:两者属于字节流,前者输入,后者输出.一般后缀名 ...

  9. smarty中判断数组是否为空的方法

    1,用count来取得数组的下标个数 下面例子中,如果$array为空则不输出任何数据 以下为引用的内容:{if $array|@count neq 0 }... ...{/if} 2,直接来判断 以 ...

  10. SQL SERVER添加表注释、字段注释

    --为字段添加注释 --Eg. execute sp_addextendedproperty 'MS_Description','字段备注信息','user','dbo','table','字段所属的 ...