js判断远程图片是否可以访问
墨初 前端设计 4831阅读
在前端做让用户输入远程图片地址并提交给后端的功能时,需要做一下远程图片是否可以访问的判断逻辑,以便用户提交的远程图片可以被访问到,这样后期处理图片时也省了好多的力气。那么我们今天就来说一下如何使用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 也可以判断一个图片是否存在,不过只能在同一个域名下使用,不然会出现跨域的问题,这里不再介绍,可以自行搜索相关的资料!