首先,来看下效果图(演示一下图片正常加载与加载失败时的效果)



在线体验地址:https://hxkj.vip/demo/vueImgOnerror/

一、常规方法解决

我们都知道,img标签支持onerror 事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。

例如这样使用:

<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个logoError.png 图片。也就是说图片存在则显示logo.png,图片不存在将显示 logoError.png

但是,注意哦,这里有个大坑哦,如果logoError.png 也不存在,则会继续触发 onerror,导致死循环,页面卡死。而且,就算图片存在,但网络很不通畅,也可能触发 onerror

当然,解决办法是有的:

<img src="images/logo.png" onerror="notfound();"/>

<script type="text/javascript">
function notfound() {
var img = event.srcElement;
img.src = "images/logoError.png";
img.onerror = null; //解绑onerror事件
}
</script>

二、通过vue绑定onerror实现

本质上跟第一种方法是差不多的

使用方法:

<img :src="images/logo.png" :onerror="defaultImg">

<script>
export default {
name: "imgError",
data() {
return {
defaultImg: 'this.src="' + require('images/logoError.png') + '"' //默认图地址
}
}
}
</script>

同样的,这里也会遇到跟第一种方法类似的问题,当默认图也不存在时,图片加载死循环。

三、通过vue自定义指令

注意哦,大招来了O!!!每次使用vue的指令都感觉好爽,特别的方便,现在自己搞一个,用起来会更爽。

在这之前,先了解下vue的自定义指令到底怎么玩,还是很有必要的。

这种东西呢,还是看文档吧,文档写得挺详细的。传送门:https://cn.vuejs.org/v2/guide/custom-directive.html

首先在入口文件定义一个全局指令

//全局注册自定义指令,用于判断当前图片是否能够加载成功,可以加载成功则赋值为img的src属性,否则使用默认图片
Vue.directive('real-img', async function (el, binding) {//指令名称为:real-img
let imgURL = binding.value;//获取图片地址
if (imgURL) {
let exist = await imageIsExist(imgURL);
if (exist) {
el.setAttribute('src', imgURL);
}
}
}) /**
* 检测图片是否存在
* @param url
*/
let imageIsExist = function(url) {
return new Promise((resolve) => {
var img = new Image();
img.onload = function () {
if (this.complete == true){
resolve(true);
img = null;
}
}
img.onerror = function () {
resolve(false);
img = null;
}
img.src = url;
})
}

然后使用的时候就特别方便了,因为是全局注册的,所以每个页面都可以直接使用

<!--v-real-img 就是刚刚定义的指令,绑定的为真实要显示的图片地址。src为默认图片地址-->
<img src="images/logoError.png" v-real-img="images/logo.png">
使用这种方法还有一个天然的优势,那就是当网速较慢或者图片一次性加载较多的话,可以达到占位图的效果。来,look look。

Okay,三种方法都介绍完了,选哪种各凭喜好!

看完之后有什么不懂的,可以留言反馈。

DEMO GitHub地址:https://github.com/TangSY/vue-img-onerror

转载请注明出处:https://www.jianshu.com/p/394c487d81d7

作者:TSY

个人空间:https://hxkj.vip

vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法的更多相关文章

  1. vue,onerror实现当图片加载失败时使用默认图

    1. 2.

  2. 当图片加载失败时更换图片, Firefox onerror 报错

    当图片加载失败时更换图片. <!DOCTYPE html> <meta charset="UTF-8"> <img src="http:// ...

  3. vue当图片加载失败时,用一个默认图片替换;

    原理就是给img绑定error事件,替换原有的src地址. 首先在data中创建一个defaultImg(随便起的),里面的值是该默认图片的地址: 在html页面的img标签上绑定该属性 这样默认图片 ...

  4. 伪元素黑魔法:一个替代onerror解决图片加载失败的方案

    问题的引出是这样的,在一个项目中有大量的页面主体是table做数据展示,所以就封装了一个table的组件,提供动态渲染的方案.有个问题是数据类型中有图片,对于图片的加载失败我们需要做容错.一般我们的思 ...

  5. vue 图片加载失败调用

    <img :src="bak" @error="imgLoadError()" alt="bak"> data(){ retur ...

  6. 图片onerror事件,为图片加载指定默认图片

    为图片指定加载失败时显示默认图片,js输出的img对象,onerror是事件,不是属性,所以这样写是不起作用的: var img = $(document.createElement("IM ...

  7. Vue回炉重造之图片加载性能优化

    前言 图片加载优化对于一个网站性能好坏起着至关重要的作用.所以我们使用Vue来操作一波.备注 以下的优化一.优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的 ...

  8. vue判断图片为空或者图片加载不成功时显示默认图片

    纯css解决方案: <img src="broken.png" alt=""> img { position: relative; } img:af ...

  9. vue 自定义指令的魅力

    [第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...

随机推荐

  1. Atcoder D - Black and White Tree(树dp+博弈)

    题目链接:http://agc014.contest.atcoder.jp/tasks/agc014_d 题意:有一棵树先手涂白色,后手涂黑色,直到不能再涂为止.涂完后再把所有黑色直接相邻的白色都变成 ...

  2. Java并发编程之ThreadLocal解析

    本文讨论的是JDK 1.8中的ThreadLocal ThreadLocal概念 ThreadLocal多线程间并发访问变量的解决方案,为每个线程提供变量的副本,用空间换时间. ThreadLocal ...

  3. 【Offer】[35] 【复杂链表的复制】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针指向任意一个节点),返回结果为复制后复杂链表的he ...

  4. get和post请求方式的区别

    1.用途方面: get是向服务器请求数据,post是向服务器发送数据. 2.大小方面: get发送数据上有大小限制,post理想上无大小限制,实际上有限制. 3.安全方面: get请求的数据会显示在地 ...

  5. android中shape 的使用

    android 开发中 对于 shape 和 selector的使用,一直都不是很熟练, 记录一下.便于以后参考. 举个项目中例子图 对于上面的2个radiobutton ,背景我们可以让美工做一个. ...

  6. Java线程的几种状态(基于Oracle jdk 1.8)

    Java中线程的状态定义在java.lang.Thread类中的一个枚举中. public enum State { /** * Thread state for a thread which has ...

  7. 接口自动化测试unittest+request+excel(一)

    注: 学习python自动化测试,需要先学习python基础,主要还是多敲代码,多联系,孰能生巧,你也会是一名合格的程序员 python基础学习: http://c.biancheng.net/pyt ...

  8. java使用FileSystem上传文件到hadoop分布式文件系统配置

    Configuration conf = new Configuration(); conf.set("fs.defaultFS", "hdfs://sparkclust ...

  9. Flutter 中文文档网站 flutter.cn 正式发布!

    在通常的对 Flutter 介绍中,最耳熟能详的是下面四个特点: 精美 (Beautiful):充分的赋予和发挥设计师的创造力和想象力,让你真正掌控屏幕上的每一个像素. ** 极速 (Fast)**: ...

  10. jenkins在windows上自动化部署.Net(.Net Core)项目

    前言 什么是持续集成呢?Continuous integration(CI).持续集成是一种软件开发实践,即团队开发成员经常集成他们的工作,通常每个成员至少集成一次,也就意味着每天可能会发生多次集成. ...