Javascript 如何从文件夹动态加载图像，而不是在数组中输入每个图像名称？

我将手动将文件夹中的每个图像放入数组。是否有一种方法可以动态执行此操作，但只需使用for循环来迭代文件夹中的图像

index.html

<div class = "TestRotator">
<img src = "/Users/loh/Documents/ElectronJS/newapp1/newapp1/pages/images/Fib.png", height="300" id="rotator">
</div>

JS

（功能（）{
var rotator=document.getElementById（'rotator'）；//更改以匹配图像ID
var imageDir='/Users/loh/Documents/ElectronJS/newapp1/newapp1/pages/images/'；
var=5；
//设置延迟的秒数
//列出图像名称
var images=['Camel.png'、'Noose.png'、'Sphinx.png']；
var num=0；
var changeImage=函数（）{
var len=images.length；
rotator.src=imageDir+images[num++]；
如果（num==len）{
num=0；
}
};
设置间隔（changeImage，DelayUnseconds*1000）；
})();

一个选项是重命名图像，例如从

Camel.png

和

Noose.png

到

0.png

和

1.png

。然后你可以做：

let currentIndex = 0;
const totalImages = 3;
const changeImage = function () {
    num = (num + 1) % totalImages;
    rotator.src = imageDir + num + '.png';
};

另一个选项是，如果您可以在服务器上托管映像（在本地主机上或在internet某处），那么您可以在服务器上添加一个路由，允许客户端JS直接请求映像中所有文件的列表，然后对其进行迭代。可以让您执行以下操作：

fetch('get-image-file-names')
  .then(res => res.json())
  .then((images) => {
    const rotator = document.getElementById('rotator');
    // etc; now use the `images` variable, which is an array of image names
    // sent to the client by the server
  });

---

一个选项是重命名图像，例如从

Camel.png

和

Noose.png

到

0.png

和

1.png

。然后你可以做：

let currentIndex = 0;
const totalImages = 3;
const changeImage = function () {
    num = (num + 1) % totalImages;
    rotator.src = imageDir + num + '.png';
};

另一个选项是，如果您可以在服务器上托管映像（在本地主机上或在internet某处），那么您可以在服务器上添加一个路由，允许客户端JS直接请求映像中所有文件的列表，然后对其进行迭代。可以让您执行以下操作：

fetch('get-image-file-names')
  .then(res => res.json())
  .then((images) => {
    const rotator = document.getElementById('rotator');
    // etc; now use the `images` variable, which is an array of image names
    // sent to the client by the server
  });

---

---

如果你的代码有效，为什么你会找到不同的解决方案？@GermanOchea他目前的方法要求源代码和图像文件名之间紧密耦合，这有点混乱，比理想情况下更难管理。如果可能的话，找到一个替代方法是很有意义的，我认为浏览器不能列出一个目录的文件列表，您可以使用nodeJS@CertainPerformance这是对的。这对我来说有点难管理，因为我的文件夹里有50多张图片。@MisterJojo谢谢！我还没有开始使用NodeJS。我会开始调查的！如果你的代码有效，为什么你会找到不同的解决方案？@GermanOchea他目前的方法要求源代码和图像文件名之间紧密耦合，这有点混乱，比理想情况下更难管理。如果可能的话，找到一个替代方法是很有意义的，我认为浏览器不能列出一个目录的文件列表，您可以使用nodeJS@CertainPerformance这是对的。这对我来说有点难管理，因为我的文件夹里有50多张图片。@MisterJojo谢谢！我还没有开始使用NodeJS。我会开始调查的！或者

num=++num%totalImages

这是可能的，但我更喜欢避免使用增量前或增量后作为表达式，这会使代码更难一目了然。这只是一个习惯问题，增量前应该被更多地使用：）@CertainPerformance谢谢！第一个解决方案对我来说效果更好。我有一个断开的图像，它在我的循环中显示，在它完成了对图像集的循环之后。我也输入了正确的图像总数。知道为什么会这样吗？我试图删除img标记中的src。@ikol您确定要从0开始图像，如我的回答中所示吗

0.png

然后

1.png

等等你可以从1开始，但是这对于所需的模逻辑来说并不太好，并且会让事情变得更糟糕，或者

num=++num%totalImages

这是可能的，但是我更喜欢避免使用前增量或后增量作为表达式，这使得代码更难一目了然。这只是一个习惯问题，预增量值得更多地使用：）@CertainPerformance谢谢！第一个解决方案对我来说效果更好。我有一个断开的图像，它在我的循环中显示，在它完成了对图像集的循环之后。我也输入了正确的图像总数。知道为什么会这样吗？我试图删除img标记中的src。@ikol您确定要从0开始图像，如我的回答中所示吗

0.png

然后

1.png

等等你可以从1开始，但是对于所需的模逻辑来说，这并不能很好地工作，并且会让事情变得更糟糕