오류 처리와 함께 루프를 사용하여 로컬 폴더에서 이미지로드

Question

for-loop를 사용하여 정적 웹 응용 프로그램에 이미지를로드하려고합니다. 로컬 서버를 실행하기 위해 nodejs http-server를 실행 중입니다.

아래 코드는 작동하지 않고 정의되지 않은 상태로 반환됩니다. 누구든지 문제를 지적 할 수 있습니까? 또한이 웹 응용 프로그램은 클라이언트 컴퓨터에서 실행됩니다.

이미지 파일 경로가 유효하지 않거나 이미지를 찾을 수없는 경우 기본값으로 설정해야합니다.

내 코드는 $ 갔지()없이이 작업을 수행하는 다른 방법이 있나요이

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

입니까? @Kattath의 의견에 확장

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

, 코드가 더 좋아 보일 것입니다 :

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