Javascript 如何检测图像路径是否有效？

我发现了一个关于图像的问题

我尝试了以下代码

var image = new Image;
    image.src = "http://project" + path + '.png';

    image.onload = function(){
        var imageWidth = this.width + this.height;
        if(imageWidth==0){
           image.src = "http://project2" + path + '.png';            

           //the project2 path could be broken too and 
           //I want to use project3 or project4 as the
           //path and keep testing it, but there is no way to do it from here.
       }
    }

---

是否可以在这里进行

递归测试？非常感谢
 损坏的图像将调用
onerror
，而不是
onload

image.onerror = function () {
  console.log("broken");
  callToTryNewSrc();
}


基本递归检查

function getImage(path, callback) {

    //if numeric
    var ind = 1;
    var maxServer = 5;

   //if named differently
   //var ind = 0;
   //var servers = ["//foo1","//foo2","//bar1"];
   //var maxServer = servers.length-1;


    function test() {

        var img = new Image();
        img.onload = function () {
            if (callback) {
                callback(img);
            }
        }
        img.onerror = function () {
            if (ind <= maxServer) {
                test();
            } else {
                if (callback) {
                    callback(img);
                }
            }
        }
        var currentPath = "http://project" + ind + path + '.png';
        //var currentPath = servers[ind] + path + '.png';

        img.src = currentPath;
        ind++;
    }

    test();

}

//calling it
getImage("/foo", function (img) {
    console.log(img);
});

函数getImage（路径，回调）{
//如果是数字
var-ind=1；
var-maxServer=5；
//如果名称不同
//var-ind=0；
//var servers=[“//foo1”、“//foo2”、“//bar1”]；
//var maxServer=servers.length-1；
功能测试（）{
var img=新图像（）；
img.onload=函数（）{
如果（回调）{
回拨（img）；
}
}
img.onerror=函数（）{
如果（ind断开的图像将调用
onerror
，而不是
onload

image.onerror = function () {
  console.log("broken");
  callToTryNewSrc();
}


基本递归检查

function getImage(path, callback) {

    //if numeric
    var ind = 1;
    var maxServer = 5;

   //if named differently
   //var ind = 0;
   //var servers = ["//foo1","//foo2","//bar1"];
   //var maxServer = servers.length-1;


    function test() {

        var img = new Image();
        img.onload = function () {
            if (callback) {
                callback(img);
            }
        }
        img.onerror = function () {
            if (ind <= maxServer) {
                test();
            } else {
                if (callback) {
                    callback(img);
                }
            }
        }
        var currentPath = "http://project" + ind + path + '.png';
        //var currentPath = servers[ind] + path + '.png';

        img.src = currentPath;
        ind++;
    }

    test();

}

//calling it
getImage("/foo", function (img) {
    console.log(img);
});

函数getImage（路径，回调）{
//如果是数字
var-ind=1；
var-maxServer=5；
//如果名称不同
//var-ind=0；
//var servers=[“//foo1”、“//foo2”、“//bar1”]；
//var maxServer=servers.length-1；
功能测试（）{
var img=新图像（）；
img.onload=函数（）{
如果（回调）{
回拨（img）；
}
}
img.onerror=函数（）{
如果（ind您可以尝试此设置：

var paths = ["/img1", "/img2", "/img3"];
var beginning = "http://project";
var ending = ".png";

function getImage(images, prefix, suffix, callback) {
    var iterator = function (i) {
        if (i < images.length) {
            var image = new Image();

            image.onload = function () {
                var imageWidth = this.width + this.height;
                if (imageWidth === 0) {
                    console.log("onload problem");
                    iterator(++i);
                } else {
                    console.log("onload good");
                    callback(i, image);
                }
            };

            image.onerror = function () {
                console.log("onerror");
                iterator(++i);
            };

            image.src = prefix + images[i] + suffix;
        }
    };
    iterator(0);
}

getImage(paths, beginning, ending, function (index, img) {
    console.log("Callback: ", index, ", ", img);
});

var路径=[“/img1”、“/img2”、“/img3”]；
变量开始=”http://project";
var end=“.png”；
函数getImage（图像、前缀、后缀、回调）{
变量迭代器=函数（i）{
if（i

演示：您可以尝试以下设置：

var paths = ["/img1", "/img2", "/img3"];
var beginning = "http://project";
var ending = ".png";

function getImage(images, prefix, suffix, callback) {
    var iterator = function (i) {
        if (i < images.length) {
            var image = new Image();

            image.onload = function () {
                var imageWidth = this.width + this.height;
                if (imageWidth === 0) {
                    console.log("onload problem");
                    iterator(++i);
                } else {
                    console.log("onload good");
                    callback(i, image);
                }
            };

            image.onerror = function () {
                console.log("onerror");
                iterator(++i);
            };

            image.src = prefix + images[i] + suffix;
        }
    };
    iterator(0);
}

getImage(paths, beginning, ending, function (index, img) {
    console.log("Callback: ", index, ", ", img);
});

var路径=[“/img1”、“/img2”、“/img3”]；
变量开始=”http://project";
var end=“.png”；
函数getImage（图像、前缀、后缀、回调）{
变量迭代器=函数（i）{
if（i

演示：
仅仅打开开发人员工具并查看链接是否断开还不够吗？我需要在飞行中执行此操作。这样代码就可以拾取具有有效路径的图像。仅仅打开开发人员工具并查看链接是否断开还不够吗？我需要在飞行中执行此操作。这样代码就可以拾取图像具有有效路径的。