img标签图片加载异常处理|图片加载默认显示

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事件，但是控制台没有报错信息。