如果链接存在图像，则返回真，否则为假

Question

我有一个代码。它正在验证映像的存在。如果不是"返回真"，它就可以完美地工作;我设置了"警报("存在"(;"。

使用 "return true;" 它返回 "undefined"; 为什么代码不适用于"return true;"？

我执行这样的代码gallery.VerifyImg("https://jonarhipov.neocities.org/2.png");

var gallery = {
items: [],
ItemsConstructor: function ItemsConstructor(img_url) {
this.img_url = img_url;
},
CreateItem: function LoadImage(i) {
/*
gallery.items[i] = new ItemsConstructor("https://jonarhipov.neocities.org/" + i + ".jpg");
$(".gallery").append("<div class='item' style='background-image: url(" + gallery.items[i].img_url + ")'></div>");*/
},
VerifyImg: function VerifyImg(url) {
var success;
var img = new Image();
img.src = url;
img.onload = function(){return true;};
img.onerror = function(){return false;};
}
}

谢谢！

Answer 1

或者使用回调函数代替承诺

var gallery = {
items: [],
ItemsConstructor: function ItemsConstructor(img_url) {
this.img_url = img_url;
},
CreateItem: function LoadImage(i) {
/*
gallery.items[i] = new ItemsConstructor("https://jonarhipov.neocities.org/" + i + ".jpg");
$(".gallery").append("<div class='item' style='background-image: url(" + gallery.items[i].img_url + ")'></div>");*/
},
VerifyImg: function VerifyImg(url,cb) {
var success;
var img = new Image();
img.src = url;
img.onload = cb;
img.onerror = cb;
}
}

像这样调用它

gallery.VerifyImg(url,function(response) {
console.log(response.type) //returns load or error
})

Answer 2

你的方法几乎是正确的，你只需要返回 Promise，因为图像加载是异步的：

VerifyImg: function VerifyImg(url) {
var promise = new Promise();
var img = new Image();
img.src = url;
img.onload = promise.resolve;
img.onerror = promise.reject;
return promise;
}

Answer 3

VerifyImg: function VerifyImg(url) {
var success;
var img = new Image();
img.src = url;
img.onload = function(){return true;};
img.onerror = function(){return false;};
}

在这种情况下，return true;从内部函数img.onload处理程序返回，这就是VerifyImg返回undefined的原因。您应该执行以下操作(同步解决方案(：

var http = new XMLHttpRequest();
http.open('HEAD', url, false);
http.send();
return http.status >= 200 && http.status < 400;

如果需要现代异步解决方案，可以使用fetch函数：

return fetch(url, {method: "HEAD"}).then(data => data.status >= 200 && data.status < 400);

这两个版本的代码都不会从服务器下载整个图像，他们会使用HEAD请求检查它是否存在，这更快并节省流量。