img标签图片加载异常处理
img标签中的src
如果加载失败会显示错误文件,可以利用以下方法处理异常图片
VUE 写法
页面
<img :src="scope.row.picUrl" alt="" @load="imgLoad" @error="setDefaultImage($event)" />
引入图片
import defaultImage from '../../assets/images/xxx.svg'
引入方法
// 图片加载完成
imgLoad(){
console.log('图片加载完成')
}
// 异常图片处理
setDefaultImage(e) {
e.target.src = defaultImage
},
原生写法
<img src="//xxx.xxx.xxx/img.png" onload='' onerror="this.src = '//xxx.xxx.xxx/default.png'">
// 获取图片标签中的图片信息
let imgElement = document.getElementById('imageSrc')
imgElement.onload = function () {
console.log('加载完成')
}
总结
src
属性用于指定图片的 URL 地址,与事件相关的逻辑总结如下:
- 当
src
地址正确时且图片加载完成触发onload
事件; - 当
src
地址不正确时,触发onerror
事件,并且控制台会有报错信息。 - 当不设置
src
属性时,即不触发onload
事件,也不触发onerror
事件,控制台也没有报错信息。 - 划重点,当
src
地址为空时,只触发onerror
事件,但是控制台没有报错信息。