img onError的那些事

最近遇到一个问题：

一个图片链接， 前一秒中是个无效链接，后一秒有效，但前一秒img标签已经渲染了，导致图片无显示

 

解决办法：利用Img标签的onError事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件

<img onError={(e) => e.target.src = f } src={f} key={i} />

 

因为前一秒是个无效链接，所以走onError事件的时候，拿到的还是无效链接，可能因为缓存，原理没搞明白，这时候可以在链接后面手动加个时间戳或其他的，让其刷新，这就解决问题了

<img onError={(e) => { e.target.src = `${f}&timeStamp=${new Date().getTime()}` }} src={f} key={i} />

 

 

 

课外提示：

有时，img标签中的src图片加载失败，原来的图片位置会出现一个碎片图标，想要展示其他错误图片

解决：

<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

 

如果onError事件的图片不存在，会导致一直刷的问题，甚至会导致死循环

解决：

<script type="text/javascript">
    function imgerrorfun(){
        var img= event.srcElement;
        img.src="images/logoError.png";
        img.onerror=null; // 控制不要一直跳动
    }
</script>

<img src="images/logo.png" onerror="imgerrorfun();" />

 

课外提示链接：https://www.cnblogs.com/willingtolove/p/9544576.html

 

 

img标签