图片加载失败替换图片解决方案
大家好，又见面了，我是你们的朋友全栈君。
图片加载失败在不同浏览器表现有差异，比如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.srcElement
img.src = this.defaultImg
img.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 = courseImg
break
case 'cert':
el.src = certificateImg
break
case 'photo':
el.src = photoImg
break
default:
el.src = certificateImg
}
el.onerror = null // 防止闪图
}
},
update: function (el, binding) {
el.onerror = () => {
switch (binding.value) {
case 'course':
el.src = courseImg
break
case 'cert':
el.src = certificateImg
break
case 'photo':
el.src = photoImg
break
default:
el.src = certificateImg
}
el.onerror = null // 防止闪图
}
}
})html使用：
<img :src="imgUIrl" alt="" v-errorAlt="'cert'">发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/137273.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年6月2，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
