首先,来看下效果图(演示一下图片正常加载与加载失败时的效果)
在线体验地址:https://hxkj.vip/demo/vueImgOnerror/
一、常规方法解决
我们都知道,
img
标签支持onerror
事件,在装载文档或图像的过程中如果发生了错误,就会触发onerror
事件。可以使用一张提示错误的图片代替显示不了的图片。
例如这样使用:
<img src="images/logo.png" "javascript:this.src='images/logoError.png';">
当图片不存在时,将触发 onerror
,而onerror
中又为img
指定一个logoError.png
图片。也就是说图片存在则显示logo.png
,图片不存在将显示 logoError.png
。
但是,注意哦,这里有个大坑哦,如果logoError.png
也不存在