加载中默认图片:
主要是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. datastudio 里关于with as 的用法。

    datastudio 里sql 语句的写法,加入with as 语法. 这样方便查询,易于维护.以后都这样写. 优点: 1 易于维护,可以复用代码块 2 优化书写逻辑,方便查阅理解. 3  性能方面优 ...

  2. 屏幕适配dip

    android适配一般使用dpi 那dpi与分辨率,屏幕尺寸的关系 DPI值计算是屏幕对角线的像素值除以屏幕的大小 dip=/ 屏幕尺寸, 比如:计算WVGA(800*480)分辨率,3.7英寸的密度 ...

  3. Linux 命令详解 - ps

    完整文档 ps 命令用于显示命令执行瞬间的进程状态(Process Status).如果想动态查看进程状态可以使用 top 命令. 进程的概念 进程类型 前台进程:由终端初始化,可以通过命令行进行交互 ...

  4. ETCD 简介及基本用法

    ETCD 项目地址 ETCD 官方文档 1. 简介 ETCD 是一个高可用的分布式键值数据库,可用于服务发现.ETCD 采用 raft 一致性算法,基于 Go 语言实现. 特点 简单:安装配置使用简单 ...

  5. Java IO(2)

    关于流的概念 Java 由流来完成具体的IO操作,虽然面对的是不同的外设(网络.鼠标.键盘)IO流使用与全部的外设,在底层Java已经将具体与物理设备交互的细节都处理好了. 流的分类: 从功能上 输入 ...

  6. 《JAVA设计模式》之工厂方法模式 (Factory)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述工厂方法模式的: 工厂方法模式是类的创建模式,又叫做虚拟构造子(Virtual Constructor)模式或者多态性工厂(Polymor ...

  7. Java NIO 缓冲区

    Java NIO 在JDK1.4的时候引入,主要解决传统IO的一些性能问题.NIO 主要内容包含 Buffer .Channel.Selector等内容,本文主要讲解Buffer相关的内容. Buff ...

  8. JedisPool使用注意事项

    转自:http://www.cnblogs.com/wangxin37/p/6397783.html JedisPool使用注意事项: 1.每次从pool获取资源后,一定要try-finally释放, ...

  9. MySQL-第N篇杂记

    1.数据的导入导出 2.查询结果的重定向 3.ON DUPLICATE KEY UPDATE对于指定的主键或者唯一键,insert时发生冲突则进行update操作. 4.解决MySQL中问乱码问题,分 ...

  10. [NOIP2016]借教室

    NOIP2012提高组D2T2. 这道题目非常基础,正解貌似是二分+差分数组,在这里提供一种线段树的思路. 很容易发现题目让我们每次修改一段区间,然后我们只需要看每一个区间内有没有负数就可以了.可以用 ...