判断图片的网络地址是否有效

方法：利用 HTML DOM Image 对象

Image 对象提供了两个事件，分别是：onerror & onload。

用法如下：

// new Image对象
const IMG = new Image();
// 设置路径
IMG.src = yourImgPath;
// 当图像装载完毕时调用的事件句柄
IMG.onload = ()=>{
	console.log('load事件加载')；
}
// 在装载图像的过程中发生错误时调用的事件句柄
IMG.onerror = ()=>{
	console.log('error事件加载')；
}

举例说明：

• 现在有一个网络地址图片，判断地址是否可用，如果可用，则把地址赋给 loadImg 变量，否则把 assets/image/no.jpg 这个本地路径赋值给 loading 变量。

let loading: string;
// 图片地址
const url = 'https://profile.csdnimg.cn/2/1/8/3_s_y_w123';

const IMG = new Image();
IMG.src = url;

IMG.onload = ()=>{
	loading = url;
}
IMG.onerror = ()=>{
	loading = 'assets/image/no.jpg';
}

上面的方法 其实和 使用ajax请求一下图片地址，然后判断返回状态的方法，二者本质是一样的，都是通过网络请求的返回状态来判断的。

• 不过区别就是，一个是ajax，一个是使用的Image对象。

• 当然这两者还有一个共同点，就是不可避免的都会造成异步问题。

• 关于请求造成的异步，相信大家有自己的解决办法，比如使用 promise 或者 发布订阅机制。

对于单独的某一张图片都好解决，但是不确定张数呢？我这里提出一个我面临的问题：

有一个图片数组，当我遍历这个数组取出图片路径，然后调用图片路径判断方法之后。

• 如何知道所有发生错误的图片都已经判断完成,或者说 怎么知道所有发生错误的图片中最后一张错误判断onerror执行完成了。

const imgArr = [...];
imgArr.forEach(item=>{
    const IMG = new Image();
    IMG.src = item;
    IMG.onerror = () => {
        console.log('图片发生错误');
        # 如何知道本次执行的是最后一张发生错误的图片
    }
});

当然，我们可以设置一个全局变量 count = 1；无论图片加载成功或失败都让count++，然后判断 count 是否和图片数组的length相等即可。
但是这样势必要走完所有图片地址才知道结果，有没有更加高效的呢？

//判断图片是否存在
function CheckImgExists(imgurl) {
     var ImgObj = new Image(); //判断图片是否存在  
     ImgObj.src = imgurl;  
     //存在图片
     if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {  
          console.log('图片地址有效')
          return true;
     } else {
          console.log('图片地址无效')  
          return false;
      }   
}
 
直接调用函数 CheckImgExists(图片地址) 即可