vue项目中，图片无法显示时，显示默认图片

在vue项目中，同样的图片，设置在img的src中能正常显示 
设置在img的onerror中不能正常显示

原因

项目启动后， 图片的路径并不是我们写的路径了。

示例： 
源代码：

// 直接加载
"../../assets/img/timg.jpg">
// 设置为logo.png加载失败后显示的默认图片
"/logo.png" onerror="this.src=../../assets/img/timg.jpg">

• 1
• 2
• 3
• 4

渲染后，浏览器控制台查看到的 
 

解决方案

1.通过onerror方法"/logo.png" :onerror="defaultImg">

data() {
  return {
    defaultImg: 'this.src="' + require('../../assets/img/timg.jpg') + '"'
  }
}

2.//判断图片是否存在
function isHasImg(pathImg){
    var ImgObj=new Image();
    ImgObj.src= pathImg;
     if(ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0))
     {
       return true;
     } else {
       return false;
    }
}

3. //验证图片链接是否有效
    function validateImage(url)
    {    
        var xmlHttp ;
        if (window.ActiveXObject)
         {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
         }
         else if (window.XMLHttpRequest)
         {
          xmlHttp = new XMLHttpRequest();
         } 
        xmlHttp.open("Get",url,false);
        xmlHttp.send();
        if(xmlHttp.status==404)
        return false;
        else
        return true;
    }