img标签src属性，图片资源加载不到，显示裂图，onerror

加载图片用的img标签，它的src属性指向图片的外链地址。

• 如果外链图片资源存在，就会正常显示；
• 如果不存在，就会显示裂图，影响布局，降低用户体验。

解决方法：
1>. 使用alt属性，添加资源加载失败的文字说明，效果并不好，不推荐:

<img src="图片外链地址" alt="图片加载失败提示，效果并不好"/>  

2>. 使用onerror事件，如果加载失败做什么处理:

• 示例1：隐藏

<img src="图片外链地址" alt="图片加载失败提示，效果并不好" 
     onerror="this.style.display='none'"/> 

• 示例2：this.src赋值默认src，但这个src图片 一定要存在，否则没卵用

<img src="图片外链地址" alt="图片加载失败提示，效果并不好" 
     onerror="this.src='defaultImgSrc'"/> 

这样做会有一个问题，浏览器会重复的加载这个不存在的src资源，导致即使进入了onerror处理，img会一闪一闪，裂图与默认图之间抖动切换。

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

两种方法解决：

1.更改 onerror 代码为其它处理方式，例如占位隐藏 或者 确保 onerror 中的默认图片足够小，并且存在。
2.控制onerror事件只触发一次，需要在onerror加上这行代码this.onerror=null; 如下：

<img  src="https://view.baocloud.cn:7090/bsview/profile/12345.png" 
      onerror="this.src='https://view.baocloud.cn:7090/bsview/upload-image/human.png';this.onerror=null;" 
      style='margin-top:14px;border-radius:50%;'> 

• 注意单双引号的嵌套或转义
• 不要把；写在默认src中，这个有点坑，我把分号写在src中，导致默认图也不显示，其实本意是将两行代码隔开。

完整代码：

<style type="text/css">
    .img-center{
      margin-top: 0.2rem;
        text-align: center;
    }
    .content-center{
        display: inline-flex;
    }
    .tenant-name{
      display:inline-block; 
      color: #82AF6F; 
      font-size:1rem;
      margin-top: 1.3rem;
      margin-bottom: 0.4rem;
      //padding-left:0.3rem;   
      width:100%;
      text-align:center;
    }
    .tel{
       //padding-left:0.3rem;   
      width:100%;
      text-align:center;
    }
</style>
<div id="tenantDir-info" class='img-center'>    
</div>
<script>
    var tboxId = "tenantDir-info";
    var tarr = global_metric_data;
    showTenantDirInfos(tarr, tboxId);
    function showTenantDirInfos(dataArr, domId){
        document.getElementById(domId).parentNode.parentNode.parentNode.style.padding = "0"; 
        var temp = "";
        if(!dataArr || dataArr.length==0){
            return;
        }

        var tWorkNo ="https://view.baocloud.cn:7090/bsview/upload-image/human.png", tName = "--", tMobile = "--";
        for(var i = 0; i < dataArr.length; i++){
            if(dataArr[i].label == 'tenantDirector'){
                tWorkNo = "https://view.baocloud.cn:7090/bsview/profile/"+dataArr[i].valueFormatted+".png";
            }
            if(dataArr[i].label == 'tenantDirectorName'){
                tName = dataArr[i].valueFormatted;
            }
            if(dataArr[i].label == 'mobilePhone'){
                tMobile = dataArr[i].valueFormatted;
            }
        }

        temp += "<div class='content-center'>"+
                    "<div style='width: 50%;padding-top:0.3rem;'>"+
                    "<img src='"+tWorkNo+"' onerror="
                    +"'this.src=\"https://view.baocloud.cn:7090/bsview/upload-image/human.png\";this.onerror=null;'"+
                    " style='margin-top:14px;border-radius:50%;'>"+  
                    "</div>"+  
                    "<div style='padding-top: 0.4rem;width:50%;position:relative;'>"+  
                      "<p class='tenant-name'>"+tName+"</p>";

        if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
            if(tMobile=='--'){
                temp += "<p class='tel'><span style='font-size:0.8rem;color: red;'>暂无号码</span></p></div></div>";
            }else{
                temp += "<p class='tel'><a style='color: rgb(2, 247, 2);text-decoration:none;font-size:1rem;' href='tel:"+tMobile+"'><img style='height:2rem' src='https://view.baocloud.cn:7090/bsview/upload-image/telephone.svg'></a></p></div></div>";
            }
        } else {
            // temp += "<p class='tel'><span style='font-size:1rem;color: rgb(2, 247, 2);'>"+tMobile+"</span></p></div></div>";
            temp += "<p id='tel-click-pc' class='tel'><a style='color: rgb(2, 247, 2);text-decoration:none;font-size:1rem;'><img style='height:1.8rem' src='https://view.baocloud.cn:7090/bsview/upload-image/telephone.svg'></a></p>"+
            "<p id='show-tel-pc' style='display:none;border-radius:5px;cursor:pointer;position: absolute;left: 5%;'><input style='font-size:1rem;background: #141414;cursor:pointer;' readonly id='copy-mobile-val' value='"+tMobile+"'></p>"+
            "</div></div>";
        }

        document.getElementById(domId).innerHTML = temp;
        document.getElementById('tel-click-pc').onclick=function(){
            this.style.display = 'none';
            document.getElementById('show-tel-pc').style.display = 'block';
        }
        
        document.getElementById('show-tel-pc').onclick=function(){
            var mobileVal=document.getElementById("copy-mobile-val");
            mobileVal.select(); 
            document.execCommand("Copy"); 
            this.style.display='none';
            document.getElementById('tel-click-pc').style.display = 'block';
            alert("手机号码已复制");
        }
    }
  $("#text_panel40").parents('.panel-container').height("120px");
    
</script>