JS отображение фотографий независимо от того, что расширение

Question

Моя JS проблема довольно проста: у меня есть фрагмент кода, который читает и отображает фотографии из данной папки P C. Проблема в том, что я не знаю, как заставить его отображать все типы фотографий, не принимая во внимание, какое расширение они имеют. В настоящее время отображаются только файлы .jpg.

Вот как я написал:

var index = 1;
var tempImg = new Image();
tempImg.onload = function(){
    appendImg();
}
var loadImg = function(index){
    tempImg.src = 'img/' + index + '.jpg';
}
var appendImg = function(){
    var img = document.createElement('img');
    img.src = tempImg.src;

    document.body.appendChild(img);
    loadImg(index++);

}
loadImg(index);

Answer 1

Если вы делаете это локально, вы можете использовать файловую систему api

https://www.html5rocks.com/en/tutorials/file/filesystem/

Если нет, и у вас есть папка

0.jpg
1.gif
2.png
...

тогда, если вы знаете типы изображений, которые вы можете встретить, вы можете попробовать каждый

<style>
img { width:50px }
</style>
<script>
const folder = "img/"; 
const maxImages = 4; // I think there are at least 4 images in the folder
const suffix = ["jpg","gif","png"]; 
let cnt = 0, idx = 0, container, img;
const loadImage = () => {
  if (idx >= maxImages) return; 
  if (cnt ===0) img = new Image();
  img.onload=function() {
    var saveImg = document.createElement("img");
    saveImg.src = this.src;
    saveImg.title = folder+idx+"."+suffix[cnt];
    container.appendChild(saveImg);
    idx++;
    cnt=0; 
    console.log("new image");
    loadImage()
  }
  img.onerror = function() {
    console.log("failed to load",folder+idx+"."+suffix[cnt]);
    cnt++; // try next suffix
    if (cnt >= suffix.length) {
      console.log("gave up")
      var saveImg = document.createElement("img");
      saveImg.title = folder+idx+" not found";
      saveImg.src = 'data:image/jpeg;base64,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';
      container.appendChild(saveImg);
      cnt=0; idx++;
    }
    loadImage();
  }
  console.log("trying to load", folder+idx+"."+suffix[cnt]);
  img.src = folder+idx+"."+suffix[cnt];
}

window.addEventListener("load",function() {
  container = document.getElementById("imagecontainer");
  loadImage();
});


</script>
<div id="imagecontainer"></div>

Answer 2

Я предполагаю, что ваши фотографии пронумерованы с 1 года. Это позволяет просто использовать увеличивающийся индексный номер, за которым следует жестко закодированное расширение файла, чтобы загрузить изображения, но, как вы поняли, произойдет сбой, если расширение не .jpg.

Что вы можете сделать, это сохранить точное имя файла, включая расширение внутри массива и использовать индексный номер для ссылки на конкретную картинку внутри.

var index = 0;
var myPictures = ["1.jpg", "2.png", "3.png"];
var tempImg = new Image();
tempImg.onload = function() {
  appendImg();
}
var loadImg = function() {
  tempImg.src = 'img/' + myPictures[index];
}
var appendImg = function() {
  var img = document.createElement('img');
  img.src = tempImg.src;

  document.body.appendChild(img);
  if (index + 1 < myPictures.length) {
    index++;
    loadImg();
  }


}
loadImg();