img标签的onerror事件

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

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

<img onerror="javascript:if('女'!= '女') this.src='../communication/businesscard/images/photo-boy.png'; else this.src='../communication/businesscard/images/photo-girl.png';" src="../../rest/readpictureaction/getUserPicture?isCommondto=true&userGuid=xxxxx">

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容