快捷導(dǎo)航

js/jquery判斷圖片是否存在的函數(shù)代碼

更新時(shí)間：2023年06月15日 00:24:25 作者：mdxy

這篇文章主要介紹了js/jquery判斷圖片是否存在的函數(shù)代碼,需要的朋友可以參考下

1、js函數(shù)判斷

這個(gè)方法，我用了下，同一個(gè)圖片路徑，vue的環(huán)境下，本地是可以的，但是不知道為什么到了正式環(huán)境，存在的圖片也被判斷為了false

//判斷圖片是否存在
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;
     }
}

注意：使用這種方法進(jìn)行判斷圖片是否存在時(shí)，不存在時(shí)會(huì)報(bào)404錯(cuò)誤，建議使用ajax去后臺(tái)查看圖片是否尋在。

若不介意404錯(cuò)誤,<img>標(biāo)簽有onerror事件可以在找不到當(dāng)前的src時(shí)去加載onerror事件去找到默認(rèn)圖片。

2、JS+XMLHTTP

var oreq = new ActiveXObject("Microsoft.XMLHTTP")（僅限IE內(nèi)核）
oreq.open("Get","blog/attachments/month_0606/s2006610204959.jpg",false);
oreq.send();
alert(oReq.status)
if(oReq.status==404)
alert('不存在');
else
alert("存在")
}

3、可以使用img標(biāo)簽的error方法

js：onerror后面可以直接放上備用圖片，也可以直接寫方法

vue：error后面跟方法，根據(jù)變量顯示別的

<img v-if="item.showImg" @error="noExistImg(item)" :src="`${constants.ICONS_CHANNEL}/${item.channel.toLowerCase()}.png`" style="width: 45px;"  alt="">
<span v-else class="textLogo">{{item.channelName.substr(0,1)}}</span>
noExistImg (record) {
      this.publishAccountArr.map(item => {
        if (item.id === record.id) {
          item.showImg = false
        }
      })
    }

4、幾種函數(shù)小結(jié)

function CheckImgExists(imgurl) {
        var ImgObj = new Image(); //判斷圖片是否存在  
        ImgObj.src = imgurl;
        //沒有圖片，則返回-1  
        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;
    }

<img src="./../image/109951166130586688.jpg" alt=""
    onerror="javascript:this.src='./../image/37f5e12a82766d690accd5ee86a08b0.png';">

5、JS中驗(yàn)證圖片是否存在

使用場(chǎng)景：當(dāng)不確定圖片是否存在，實(shí)現(xiàn)當(dāng)圖片不存在時(shí)，自動(dòng)發(fā)出請(qǐng)求到服務(wù)端生成新圖片或記錄日志

代碼一

// 驗(yàn)證圖片是否存在
  const checkImgExists = (imgUrl: string) => {
    return new Promise(function (resolve, reject) {
      const ImgObj = new Image();
      ImgObj.src = imgUrl;
      ImgObj.onload = (res) => {
        resolve(res);
      }
      ImgObj.onerror = (err) => {
        reject(err)
      }
    })
  }

代碼二

 checkImgExists(imgUrl) {
      return new Promise(function (resolve, reject) {
        const ImgObj = new Image();
        ImgObj.src = imgUrl;
        ImgObj.onload = (res) => {
          resolve(res);
        };
        ImgObj.onerror = (err) => {
          reject(err);
        };
      });
    }
checkImgExists(url)
            .then(() => {
              this.imgUrl = url;
            })
            .catch(() => {
              this.imgUrl = null;
            });

到此這篇關(guān)于js/jquery判斷圖片是否存在的函數(shù)代碼的文章就介紹到這了,更多相關(guān)jquery判斷圖片是否存在內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！