无论扩展名是什么，JS都显示照片

Question

我的JS问题非常简单：我有一段代码可以读取并显示给定PC文件夹中的照片。问题是，我不知道如何使其显示所有类型的照片，而不考虑它们的扩展名。当前，它仅显示.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/

如果没有，则有一个文件夹

1.jpg
2.gif
3.png
...

然后，如果您知道可以遇到的图像类型，可以尝试每一种

const suffix = ["jpg","gif","png"]; 
let cnt = 0, idx = 0;
const loadImage() {
  let img = new Image();
  img.onload=function() {
    someImageOnPage.src = this.src;
  }
  img.onerror = function() {
    if (cnt => suffix.length) return 
    cnt++;
    loadImage()
  }
  img.src = "img/"+idx+"."+suffix[cnt]
}
cnt = 0; idx = 1;
loadImage()

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();

Answer 3

您可以考虑使用一个简单的正则表达式来收集图像的所有可能扩展名。像这样："\.jpg|\.png|\.svg"，依此类推。

您可以在https://www.w3schools.com/jsref/jsref_obj_regexp.asp上了解有关正则表达式的更多信息>