javascript - 使用javascript检查图像是否存在

Question

这个问题在这里已经有了答案:




9年前关闭。

Possible Duplicate:
Check if image exists with given url using jquery
Change image source if file exists

我将图像路径的值从文本框扔到 boxvalue 中，并想使用 javascript 验证图像是否存在。

 var boxvalue = $('#UrlQueueBox').val();

我浏览了 stackoverflow 并找到了以下内容来获取图像宽度/高度，但不想使用它。

var img = document.getElementById('imageid'); 

我如何验证它是否真的是来自图像路径的图像？

Answer 1

一般策略是使用 DOM Image object例如，设置 src属性添加到您要检查的图像的 URL(这将导致浏览器获取并加载图像)，然后处理 load和 error事件来分别确定存在或不存在。
这是一个基于 Promise 的示例方法:

function imageExists(url) {
  return new Promise(resolve => {
    var img = new Image()
    img.addEventListener('load', () => resolve(true))
    img.addEventListener('error', () => resolve(false))
    img.src = url
  })
}

const url = 'http://www.google.com/images/srpr/nav_logo14.png'
imageExists(url)
  .then(ok => console.log(`RESULT: exists=${ok}`))
  //                    => RESULT: exists=true