在img标签上尽量不要使用onerror事件

在img标签上尽量不要使用onerror事件

因为在之前的时候,我在本地对用户头像修改发现,如果图片加载失败, 使用onerror事件去获取一个默认地址的图片虽然这是可行的，但是如果刚好onerror去获取的图片也不在，那么就会一直触发onerror事件，这个标签一直在请求一个不存在的图片。也就是会一直循环请求。

如果必须使用的话,就使用js的Image对象获取这个图片的信息,判断一些属性是否正常,如果正常就使用这个图片作为默认图片,不正常则不显示。、

<img src="a.jpg" onerror="imgExists(this)" alt="">
<script>
    function imgExists(e){
        //默认图片
        var imgUrl = "https://account.acgxt.com/public/images/default.png";
        var img = new Image();
        img.src=imgUrl;
        //判断图片大小是否大于0 或者 图片高度与宽度都大于0
        if(img.filesize>0||(img.width>0&&img.height>0)){
            e.src = imgUrl;
        }else{
            //默认图片也不存在的时候
        }
    }
</script>

也可以使用XMLHTTP远程判断图片是否存在。然后根据远程获取的是404还是200来更换图片