图片加载失败替换图片解决方案

图片加载失败在不同浏览器表现有差异，比如google可能会一片空白、img的宽高是0*0，ie会在图片位置会出现一个碎片图标，火狐会显示一个边框像这样：

一个页面如果很多这种好难看，一般会用默认图片替换显示，解决方法：

1、css方案：不好使。在img的伪类加替换图片，但火狐的img没有伪类，google有，有时候就算给img标签加了width、height也没有，图片加载失败img的宽高依然是0，详情见这篇文章：

https://www.cnblogs.com/fangsmile/p/7290945.html

这样使用是应为img标签的一些特性：

1，img是个比较特殊的标签，和video一样具有被替代性，所有当图片加载成功时，原先定义的伪类会失去作用不提示。

2，alt属性会在图片加载失败是出现（替代文字），这样伪类就会起作用了。

img {position: relative;
}img:after { content: ' ';display: block;position: absolute;z-index: 0;top: 0;left: 0;width: 100%;height: 100%;background: url('替代图片');background-size: 100% 100%;
}

css方案由于兼容问题，不能完美解决，所以推荐js方案：

通过img的onerror事件处理

<img src="http://www.baidu.com/jfdsklf.img"  onerror="this.src= '/assets/img/head.png'; this.onerror = null;">// this.onerror = null; 是为了防止替换图片还是丢失，img一直闪烁不停

另外，vue可以这样写：

<img :src="imgUrl" alt="" width="100" height="70" @error="imgOnerror($event)">...
data() {return {defaultImg: require('./../../../assets/img/default-course.jpg')}
},
methods: {imgOnerror(event) {let img = event.srcElementimg.src = this.defaultImgimg.onerror = null // 防止闪图},...
}

本人目前主要开发vue的项目，其实可以更高级的写法：封装成指令很方便：

directive.js

import Vue from 'vue'/**** 注册一个全局自定义指令 `v-errorAlt`* 加载错误图片替换默认图* */
const courseImg = require('./../assets/img/default-course.png')
const certificateImg = require('./../assets/img/default-certificate.png')
const photoImg = require('./../assets/img/photo.png')
Vue.directive('errorAlt', {bind: function (el, binding) {el.onerror = () => {switch (binding.value) {case 'course':el.src = courseImgbreakcase 'cert':el.src = certificateImgbreakcase 'photo':el.src = photoImgbreakdefault:el.src = certificateImg}el.onerror = null // 防止闪图}},update: function (el, binding) {el.onerror = () => {switch (binding.value) {case 'course':el.src = courseImgbreakcase 'cert':el.src = certificateImgbreakcase 'photo':el.src = photoImgbreakdefault:el.src = certificateImg}el.onerror = null // 防止闪图}}
})

html使用：


<img :src="imgUIrl" alt="" v-errorAlt="'cert'">

图片加载失败替换图片解决方案相关推荐

img标签图片加载失败显示图片
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
vue本地项目配置图片加载失败_vue图片加载失败时用默认图片替换的方法
vue图片加载失败时用默认图片替换的方法前言本文主要给大家介绍的关于vue实现图片加载失败时用默认图片替换的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧方法如下原理 ...
小程序动态图片加载失败替换本地图片
希望效果图: 前言:写一个新闻列表,一个页面里就有几十条数据,虽然分页查询,但图片有时候还会加载失败(网速.图片大小等原因) 下面说说我的思路: 我把新闻列表封装成了一个子组件, 1.在子组件标签im ...
htmlimg图片加载失败_img图片不存在显示默认图
在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容.这时候用户体验不是很好,所以就需要显示一张默认图片. 第一种方式:使用jq ...
element ui 图片加载失败_element图片懒加载的问题
本来我这个人就很懒的,并不喜欢写说明博客之类,浪费时间浪费精力,学习的过程,遇到一些很小白的问题,百度搜索解决,然后在代码里注释下而已, 突然想到世界上是存在大多数像我这样的小白的,滴水之恩当涌泉相报 ...
img图片加载失败默认图片
<img :src="item.goods_pic" οnerrοr="javascript:this.src='../static/images/default. ...
图片加载失败的正确处理
<img src="http://imgsrc.baidu.com/forum/pic/item/fd1f4134970a304e16d3176ad3c8a786c8175ca8.jp ...
vue图片懒加载插件vue-lazyload监听加载失败事件的解决方案
对于vue项目而言,图片懒加载是一个常见的图片加载方案,可以优化用户体验,而vue-lazyload则是一个广泛使用的插件. 对于某些业务场景,我们需要监听图片加载失败事件,而后进行相应的处理,然 ...
img实现图片加载前默认图片，加载时替换真实图片，加载失败时替换加载失败图片
文章目录前言一.加载前二.加载成功三.加载失败总结前言开发过程中,我们希望图片在加载失败的时候会替换成加载失败的图片,同时为了更好的体验,加载前最好也要有一张占位图片,即实现加载前显示一 ...

图片加载失败替换图片解决方案

图片加载失败替换图片解决方案相关推荐

最新文章

热门文章