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

Question

我正在尝试使用 for 循环在静态网络应用程序上加载图像。我正在运行将 nodejs http 服务器连接到运行本地服务器。

下面的代码无效并返回未定义。谁能指出问题所在？此外，此 Web 应用程序运行ning 在客户端计算机上。

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

我的代码是这样的

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

扩展@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");
        });
}

Answer 2

我已经试过了，很有效。这样我可以 return 如果找到文件路径，如果找不到默认图像...

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;
}

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

Load images from local folder using loop with error handling

jquery

image

filepath