js判断图片是否存在，不存在则替换为默认图片

方法一：利用image对象的onerror事件来判断，出错则更换image对象的src为默认图片的URL。

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'">

<img ng-src="{{mesrc}}" alt="me" class="online" οnerrοr="javascript:this.src='styles/img/userFirst.jpg'">  //chorme 和 firefox 测试正常

<img ng-src="{{mesrc}}" alt="me" class="online" οnerrοr="this.src='styles/img/userFirst.jpg'">  //chorme 和 firefox测试正常

 注意：如果使用不当，会造成死循环。比如：当【默认图片的url地址】也加载不成功（比如网速比较慢的时候）或不存在的话，

就会反复的加载(触发onerror)，最后造成堆栈溢出错误。

解决方法：

 

第一种：

去掉 onerror 代码；或者更改 onerror 代码为其它；或者确保 onerror 中的图片足够小，并且存在。

 

第二种：

 

    function nofind(){
    
        var img=event.srcElement;
            
        img.src="styles/img/userFirst.jpg";
            
        img.οnerrοr=null; // 控制不要一直跳动
        
    }

<img ng-src="{{mesrc}}" alt="me" class="online" οnerrοr="nofind();" > //方法是对的，但我选择前者。

效果图：

参考文章： 

http://www.cnblogs.com/flowers-yang/p/3419067.html

          http://www.bcty365.com/content-69-631-1.html

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'">

 注意：如果使用不当，会造成死循环。比如：当【默认图片的url地址】也加载不成功（比如网速比较慢的时候）或不存在的话，就会反复的加载，最后造成堆栈溢出错误。