使用JavaScript检查图像是否存在

16 浏览
0 Comments

使用JavaScript检查图像是否存在

可能是重复问题：

使用jQuery检查给定URL的图像是否存在

如果文件存在，则更改图像源

我将图片路径的值从文本框中传递给boxvalue，并希望使用JavaScript验证图片是否存在。

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

我在stackoverflow上浏览了一下，找到了下面的方法来获取图片的宽度/高度，但我不想使用这个方法。

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

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

0

2 答案

0 Comments

检查图像是否存在可以使用JavaScript来实现。一种常见的策略是使用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

这个测试创建了一个新的图像，无论url是否是有效的图像，都会将其保存在Google Chrome浏览器的资源-图像中，这个我不太喜欢。

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

不是专家，但对于2019年底（vue/nuxt）仍然有帮助，谢谢...

很好，onerror不是一个属性，参考stackoverflow.com/a/59366589/458321 - 此属性已被弃用，而不是事件。在需要提供商业支持的情况下，在IE11中无效。

0
0 Comments

检查图片是否存在是一个常见的需求，特别是在开发网站或应用程序时。有时候我们需要在加载图片之前先检查图片是否存在，以便在图片不存在时采取相应的措施。本文将介绍使用JavaScript检查图片是否存在的方法，并提供了一个解决方案。

解决方法如下：

首先，我们可以创建一个函数，使用JavaScript中的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而不是使用选择器或ID，可以使用以下函数：

function imageExists(url){
    var image = new Image();
    image.src = url;
    if (!image.complete) {
        return false;
    }
    else if (image.height === 0) {
        return false;
    }
    return true;
}

这个函数会创建一个新的图片对象，并将要检查的URL赋值给它。然后，我们可以使用complete属性来检查图片是否加载完成，height属性来检查图片的高度。如果图片加载未完成或者高度为0，则返回false，否则返回true。

需要注意的是，如果图片已经被缓存，那么这个方法在大多数浏览器中都可以正常工作。然而，如果缓存被禁用，新创建的图片对象可能无法加载已经缓存的图片，这种情况下会返回false。

总结一下，通过使用JavaScript的complete属性和height属性，我们可以检查图片是否存在。这个方法在大多数浏览器中都可以正常工作，但在缓存被禁用的情况下可能会失败。尽管如此，这仍然是一个非常实用的函数。

0