美文网首页前端
html img src 判断图片路径是否有效

html img src 判断图片路径是否有效

作者: 轻叹繁华似水流年 | 来源:发表于2020-07-22 10:58 被阅读0次

    html img src 图片路径不存在或者存在但是路径无效无法正常加载出来的情况,动态替换成有效的默认图片,解决办法。

    通常的判断为:

    if(pic==null){

     html='<img src="images/bg_test1.jpg" width="320" height="157" />';

     }else{

     html='<img src="'+pic+'" width="320" height="157" />';

    }

    但如果当src路径存在,但路径无效导致无法正常加载时,可以利用img 的 onerror 事件来解决:

     if(pic==null){

      html='<img src="images/bg_test1.jpg" width="320" height="157" />';

     }else{

    html='<img src="'+pic+'" width="320" height="157" οnerrοr="imgerror(this)" />';

    }

    分析:特别注意 onerror,当图片不存在时,将触发 onerror,而 onerror 中又为 img 指定一个 NoPic.gif 图片。也就是说图片存在则显示 pic.gif,图片不存在将显示 noPic.gif。但问题来了,如果 noPic.gif 也不存在,则继续触发 onerror,导致循环,故出现错误。

    说明:如果图片存在,但网络很不通畅,也可能触发 onerror。

    解决:可以在设置为默认图片之后将 onerror 事件置空,避免死循环触发。

    function imgerror(img){

    img.src="images/default.jpg";

    img.οnerrοr=null;   //控制不要一直跳动

    }

    相关文章

      网友评论

        本文标题:html img src 判断图片路径是否有效

        本文链接:https://www.haomeiwen.com/subject/lztxyftx.html