加载中默认图片:
主要是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. python中w和wb文件写入的区别!

    一:基本区别:  w:是文本写入 wb:字节写入 windows中换行符是 \r\n w写入文件的时候,遇到 \n 自动替换成  \r\n

  2. Kubernetes tutorial - K8S 官方入门教程 中文翻译

    官方教程,共 6 个小节.每一小节的第一部分是知识讲解,第二部分是在线测试环境的入口. kubectl 的命令手册 原文地址 1 创建集群 1.1 使用 Minikube 创建集群 Kubernete ...

  3. PHP获得计算机的唯一标识[cpu,网卡]

    以下是从网上转载来的源码,但是我测试均不能执行,不知道怎么回事,转过来大家可以交流一下 <?php//获取电脑的CPU信息 function OnlyU(){ $a = ''; $b = arr ...

  4. LeetCode 230. Kth Smallest Element in a BST 动态演示

    返回排序二叉树第K小的数 还是用先序遍历,记录index和K进行比较 class Solution { public: void helper(TreeNode* node, int& idx ...

  5. Android超简单气泡效果

    阿里P7移动互联网架构师进阶视频(每日更新中)免费学习请点击:https://space.bilibili.com/474380680最近有用到水下气泡上升效果,因此在网上查了一下资料,结果还真找到了 ...

  6. go 结构体取代类

    我们知道go的结构体有点类的感觉,可以有自己的属性和方法. 但是由于结构体的属性都是有零值的,我们在创建结构体的时候并不需要设置这些属性的值就能创建,但是这样创建的结构体往往没有什么实用价值. 我们可 ...

  7. matlab调试技巧

    Matlab的调试总体分为,直接调试和间接调试. 1.直接调试: (1)去掉句末的分号: (2)单独调试一个函数:将第一行的函数声明注释掉,并定义输入量,以脚本方式执行 M 文件: (3)适当地方添加 ...

  8. C#实现百度ping功能

    网站优化必做的事情之一,百度ping,主动推送给百度 文章添加时调用百度推送方法 //保存 protected void btnSubmit_Click(object sender, EventArg ...

  9. JavaScript面向对象编程(1)-- 基础

    自从有了Ajax这个概念,JavaScript作为Ajax的利器,其作用一路飙升.JavaScript最基本的使用,以及语法.浏览器对象等等东东在这里就不累赘了.把主要篇幅放在如何实现JavaScri ...

  10. 2018-8-10-让-AE-输出-MPEG-

    title author date CreateTime categories 让 AE 输出 MPEG lindexi 2018-08-10 19:17:19 +0800 2018-2-13 17: ...