img标签的onerror事件

有时,img标签中的src图片,图片不存在或者加载失败时,原来的图片位置会出现一个碎片图标,影响用户体验度,如何能够改进一下呢?

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


当图片../../rest/readpictureaction/getUserPicture?isCommondto=true&userGuid=xxxxx不存在时,将触发 onerror事件,而 onerror 中又为该 img 根据该用户性别指定了../communication/businesscard/images/photo-boy.png或者../communication/businesscard/images/photo-girl.png图片。
也就是说本人照片存在则显示本人照片,本人照片不存在将显示 替代图片。

你可能感兴趣的:(img标签的onerror事件)