不是很清楚你的問題。因為不太清楚你所謂的依folder圖檔是啥意思。

不過如果前端要可以不分格式圖片處理的話
倒是可以利用一下CSS background

.img {
  background-image: url("img_tree.gif"), url("img_tree.jpg"), url("img_tree.png");
  background-repeat: no-repeat, repeat;
  .........
}

這是這招只適合用在長寬都是一樣固定的圖片。
如果各自不同長寬的話，一般還得做一下特殊的處理才行。

另外一招就是利用一下LOAD圖片的程式寫法了。
也就是後載入的處理方式。可以在載入過程中判斷是否有成功載入及是否能讀取圖片。

當然了，如果有利用到後端語言的話。就可以用後端語言協助一下。先行判斷並載入圖檔的連結。
再送給前端處理。
畢竟前端並不能知道圖片位置。只能判斷連結圖片是否存在而已。

可參考 stackoverflow 這篇的範例能做到直接讀取資料夾內的所有圖片:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/img", true);
xhr.responseType = 'document';
xhr.onload = () => {
  if (xhr.status === 200) {
    var elements = xhr.response.getElementsByTagName("a");
    for (x of elements) {
      if ( x.href.match(/\.(jpe?g|png|gif)$/) ) { 
        let img = document.createElement("img");
        img.src = x.href;
        document.body.appendChild(img);
      } 
    };
  } 
  else {
    alert('Request failed. Returned status of ' + xhr.status);
  }
}
xhr.send()

可以先 console.log(xhr.response) 觀察下返回的資料結構

上面解答是直接取得圖片路徑後生成，但依據你的需求尚須取得檔名，同時依照你原本的格式我改寫如下供參考:

var xhr = new XMLHttpRequest();
xhr.open("GET", "/img", true);
xhr.responseType = 'document';
xhr.onload = () => {
  if (xhr.status === 200) {
    let elements = xhr.response.getElementsByTagName("a");
    let imgsSrc = []
    for (x of elements) {
      if (x.href.match(/\.(jpe?g|png|gif)$/)) {
        imgsSrc.push(x.href)
      }
    };
    roadImgHandler(imgsSrc)
  }
  else {
    alert('Request failed. Returned status of ' + xhr.status);
  }
}
xhr.send()

function roadImgHandler(imgsSrc) {
  let imgName = "";
  imgsSrc.forEach(imgSrc => {
    imgName = getFileName(imgSrc);
    document.write(`
      <p><img src="${imgSrc}" alt="${imgName}" title="${imgName}"/></p>
    `);
  });
}
function getFileName(fileUrl) {
  return fileUrl.split('/').pop().split('.')[0]
}

延伸:

1. 圖片成功讀取、也取得檔名。若還因為其他需求而依然需要取得所有檔名內的最大值最小值，應該也不難做了。

2. 或者也可以試著在請求時從 xhr.response 取圖片檔名而不是圖檔路徑。

3. 小提醒－注意非同步的問題:

   xhr.onload = () => {
     if (xhr.status === 200) {
     ....
     } 
   }
   xhr.send()
   
   imgsSrc.forEach(imgSrc => {
     ...
   });
   

   如果直接這樣寫會失敗，因為執行 imgsSrc.forEach 時，imgsSrc 還沒塞完請求資料。

希望有幫助到你囉!