使用带错误处理的循环从本地文件夹加载图像

Question

我正在尝试使用for循环在静态Web应用程序上加载图像。我正在运行nodejs http-server来运行本地服务器。

下面的代码不起作用并返回undefined。任何人都可以指出这个问题吗？此外，此Web应用程序在客户端计算机上运行。

我想要做的是，当图像文件路径无效或图像未找到时，应将其设置为默认值。

我的代码是这样的

for(let i=0;i<16;i++){
  let img_src = validatePath('img/music/',i,'.svg');
   $('img').attr(src,img_src);
}

function validatePath(folder, fileindex, extention) {
    let finalPath = "";
    let path = folder + fileindex + extention;
    $.get(path)
        .done(function(data) {
            finaPath = path;
        }).fail(function(error) {
            finaPath = "img/default.svg";
        });
    return finalPath ;
}

没有$ .get（）有没有其他方法可以做到这一点？

Answer 1

我试过这个并且有效。这样我可以返回文件路径，如果找到，默认图像，如果没有找到...

function validatePath(folder, fileindex, extension) {
    let path = folder + fileindex + extension;
    let finalPath = ""; 
    var http = new XMLHttpRequest();
    http.open('HEAD', path, false);
    http.send();
    if (http.status != 404) finalPath = path;
    else finalPath = "img/default.svg"
    return finalPath;
}

Answer 2

扩展@Kattath的评论，你的代码看起来应该更像：

for(let i=0;i<16;i++){
  validatePath('img/music/',i,'.svg', function(img_src) {
      $('img').attr(src, img_src);
  });
}

function validatePath(folder, fileindex, extension, callback) {
    let path = folder + fileindex + extension;
    $.get(path)
        .done(function(data) {
            callback(path);
        }).fail(function(error) {
            callback("img/default.svg");
        });
}