在前端做让用户输入远程图片地址并提交给后端的功能时,需要做一下远程图片是否可以访问的判断逻辑,以便用户提交的远程图片可以被访问到,这样后期处理图片时也省了好多的力气。那么我们今天就来说一下如何使用js在用户的浏览器中判断一个远程的图片地址是否可用的方法教程。

js判断远程图片是否可用

使用 js的 Image 对象可以轻松加载远程图片,而不用担心跨越的问题!

js示例代码:

<script>
// 定义一个Image对象
var img = new Image();
// 为Image对象添加图片加载成功的处理方法
img.onload = function () {
    alert("远程图片存在!");
};
//飞鸟慕鱼博客
// 为Image对象添加图片加载失败的处理方法
img.onerror = function () {
    alert("远程图片不存在!");
}
// 开始加载图片,无论加载成功或失败都会有提示
img.src = 'https://www.feiniaomy.com/zb_users/upload/2020/09/20200904220537159922833780960.jpg';
</script>

ps:小提示

使用 jq 也可以判断一个图片是否存在,不过只能在同一个域名下使用,不然会出现跨域的问题,这里不再介绍,可以自行搜索相关的资料!