关于图片的一些小utils

1.判断图片是否存在

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

2.图片加载失败后显示默认图片

<img :src="src" alt="" :onerror="defalutUrl">


 data() {
    return {
      defalutUrl: 'this.src="' + require('./image/xxx.png') + '"'
    }
 },

效果演示;

上传文档提示你；

html页面

 <input type="file" class="file" name="activity_picture"  onchange="PreviewImage(this)" required="required">
<div id="imgPreview" class="reader">

js代码

<script type="text/javascript">
    function PreviewImage(imgFile) {
        var filextension = imgFile.value.substring(imgFile.value.lastIndexOf("."), imgFile.value.length);
        filextension = filextension.toLowerCase();
        if((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {
            alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
            imgFile.focus();
        } else {
            var path;
            if(document.all) //IE
            {
                imgFile.select();
                path = document.selection.createRange().text;

                document.getElementById("imgPreview").innerHTML = "";
                document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"; //使用滤镜效果
            } else //FF
            {
                path = window.URL.createObjectURL(imgFile.files[0]);
                document.getElementById("imgPreview").innerHTML = "<img id='img1' width='120px' height='100px' src='" + path + "'/>";
                // document.getElementById("img1").src = path;
            }
        }
    }
</script>

在网上搜索了好长时间,有些都没有效果,后来终于实现了!需要的小伙伴们可以看下下面的代码,希望可以帮助你们~

function isHasImg( src ){
    var img = new Image();
    img.src = src;
    img.onload = function(){
        if( img.width > 0 || img.height > 0  ){
            onImgExistNotify(img.src,true,3);
        }
        else{
            onImgExistNotify(img.src,false,2);
        }
    } 
     
    img.onerror = function(){
        onImgExistNotify(img.src,false,1);
    }   
}


function onImgExistNotify(src,bExist,iPlace){//图片src是否存在通知
    if( bExist ){
        console.log("图片src="+src+"存在"+iPlace);
    }
    else{
        console.log("图片src="+src+"不存在"+iPlace);
    }
}