本文主要是介绍js判断图片的网络地址是否有效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
判断图片的网络地址是否有效
方法：利用 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相等即可。
但是这样势必要走完所有图片地址才知道结果，有没有更加高效的呢？
这篇关于js判断图片的网络地址是否有效的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
