使用javascript检查图像是否存在

IT技术 javascript
2021-01-29 00:54:40

可能的重复:
使用 jquery 检查给定 url 的
图像是否存在如果文件存在则更改图像源

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

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

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

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

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

2个回答
// The "callback" argument is called with either true or false
// depending on whether the image at "url" exists or not.
function imageExists(url, callback) {
  var img = new Image();
  img.onload = function() { callback(true); };
  img.onerror = function() { callback(false); };
  img.src = url;
}

// Sample usage
var imageUrl = 'http://www.google.com/images/srpr/nav_logo14.png';
imageExists(imageUrl, function(exists) {
  console.log('RESULT: url=' + imageUrl + ', exists=' + exists);
});
不是专家😊但这仍然有助于2019年底(vue/nuxt)谢谢...
2021-04-01 00:54:40
这很好,但你能让它返回 URL 吗?我有一个尝试为列表加载图标的循环,我需要一些可以返回您尝试过的 URL 或如果图像不存在的默认 URL 的东西。所有的解决方案似乎都运行了一些代码或转储到控制台。
2021-04-04 00:54:40
很高兴 onerror 不是属性,请遵循stackoverflow.com/a/59366589/458321 - 不推荐使用该属性,而不是事件。不适用于 IE11(对于那些必须提供商业支持的人)
2021-04-05 00:54:40
此测试创建一个新图像,该图像保存在 Google Chrome 浏览器中的 Resources --> Images 下,无论 url 是否为我特别不喜欢的有效图像。
2021-04-08 00:54:40

您可以创建一个函数并检查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;
}
可以在没有#selector 或#Id 的情况下完成吗?我想直接从路径中获取它。
2021-03-22 00:54:40
这将在所有浏览器中工作,因为如果已经加载的图像被缓存,那将工作。所以创建一个新图像,只会加载已经缓存的图像。但是如果那个过程失败了,那么它就会失败,缓存被禁用时就是这种情况。不过还是不错的功能。
2021-04-03 00:54:40