js/jquery判断图片是否存在的函数代码

class ImgObj 存在图片 467 来源： 2024-10-11

1、js函数判断

这个方法，我用了下，同一个图片路径，vue的环境下，本地是可以的，但是不知道为什么到了正式环境，存在的图片也被判断为了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;
     }
}

注意：使用这种方法进行判断图片是否存在时，不存在时会报404错误，建议使用ajax去后台查看图片是否寻在。

若不介意404错误,<img>标签有onerror事件可以在找不到当前的src时去加载onerror事件去找到默认图片。

2、JS+XMLHTTP

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

3、可以使用img标签的error方法

js：onerror后面可以直接放上备用图片，也可以直接写方法

vue：error后面跟方法，根据变量显示别的

<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(null,1)}}</span>
noExistImg (record) {
      this.publishAccountArr.map(item => {
        if (item.id === record.id) {
          item.showImg = false
        }
      })
    }

4、几种函数小结

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="" alt=""
    onerror="javascript:this.src='';">

5、JS中验证图片是否存在

使用场景：当不确定图片是否存在，实现当图片不存在时，自动发出请求到服务端生成新图片或记录日志

代码一

// 验证图片是否存在
  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;
            });

到此这篇关于js/jquery判断图片是否存在的函数代码的文章就介绍到这了,更多相关jquery判断图片是否存在内容请搜索插件窝以前的文章或继续浏览下面的相关文章希望大家以后多多支持插件窝！

上一篇：基于jquery-resizable创建可调整大小的表(table)格

下一篇：jQuery获取父节点、子节点、兄弟节点的代码