使用JavaScript检查图像是否存在

Question

可能是重复问题：
使用 jQuery 检查给定 URL 是否存在图像
如果文件存在，则更改图像源

我将从文本框中获取一个图片路径的值，将其放入 boxvalue，并希望使用 JavaScript 验证该图像是否存在。

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

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

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

如何验证一个图像路径是否真的是图像？

- X10nD

---

请查看这个帖子：https://dev59.com/3W025IYBdhLWcg3w_rFA - Felipe Oriani

@FelipeOriani 这是创建一个新图像。 - X10nD

@maerics - 我们如何验证一个给定的图片路径是否真的是一张图片？ - X10nD

@vault 不错的发现。但是如果你仔细看，它仍然是图像#selectorid而不是直接图像检查。 - X10nD

@vault 那是我不想要的ajax。maerics已经给出了我需要的答案。 - X10nD

Answer 1

一般的策略是使用一个DOM Image 对象实例，将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

- maerics

---

这个测试会创建一个新的图像，无论URL是否是有效的图像，在Google Chrome浏览器中都会保存在资源--> 图像中，我并不特别喜欢。 - Flying Emu

这很棒，但你能让它返回URL吗？我有一个循环，尝试加载列表中的图标，我需要一个能够返回你尝试的URL，或者如果图片不存在，则返回默认URL的东西。所有的解决方案似乎都运行一些代码或将其输出到控制台。 - chazthetic

虽然我不是专家，但这个还是在2019年底帮了我（Vue/Nuxt）。谢谢... - user6221709

很好，onerror不是一个属性，遵循https://dev59.com/S1MH5IYBdhLWcg3w1z9-#59366589 - 该属性已被弃用，而非事件。在IE11中无法使用（对于那些必须提供商业支持的人）。 - TamusJRoyce

Answer 2

您可以创建一个函数并检查`complete`属性。

function ImageExists(selector) {
    var imageFound = $(selector); 

    if (!imageFound.get(0).complete) {
        return false;
    }
    else if (imageFound.height() === 0) {
        return false;
    }

    return true;
}

并调用该函数。

 var exists = ImageExists('#UrlQueueBox');

与您的情况相同，使用url而不是选择器作为参数的相同功能：

function imageExists(url){

    var image = new Image();

    image.src = url;

    if (!image.complete) {
        return false;
    }
    else if (image.height === 0) {
        return false;
    }

    return true;
}

- Felipe Oriani

---

能否不使用 #selector 或 #Id 来完成？我想直接从路径中获取。 - X10nD

这个功能能在所有浏览器中使用吗？因为如果已经加载的图片被缓存了，那么这个功能就可以正常工作。这样创建新图片时，只需要加载已经缓存的图片即可。但是如果这个过程失败了，那么它就会失效，这种情况通常是缓存被禁用的情况。尽管如此，这仍然是一个很好的函数。 - Mohamed Allal