Javascript 从文件夹以html格式显示多个图像

嗨，我是html新手，我只是做一些有趣的东西作为练习。我正在尝试用html显示多个图像，但我不确定如何显示。例如

---

我现在有这个，但我不想每次都写这个。我在想我该怎么做。我可以使用JavaScript、php或其他任何工具将所有图像一次放入文件夹吗？

您需要创建一个rest端点，该端点将返回文件夹中所有图像的列表，然后您可以在数组中循环并将图像动态添加到DOM中

例：

PHP上的简单代码：

<?php
  $refFolder = "/images/1/";
  function folderList($Path) {
    return  array_slice(scandir($Path,SCANDIR_SORT_ASCENDING), 0); 
  }
  foreach(folderList($refFolder) as $file) { 
    $Z_info = pathinfo($file, PATHINFO_FILENAME);
    $Z_type = pathinfo($file, PATHINFO_EXTENSION);
    if ($Z_type == 'jpg') { 
?>
    <img class="center" 
      src="<? echo $refFolder.$file; ?>" 
      alt="<? echo $Z_info; ?>" 
    />
<?php } } ?>

---

若名称是串联的，那个么你们可以使用循环。你们想创建文件管理器吗？

const folder = '/folder';
const arr = ['img1.jpg', 'img2.jpg'];

arr.forEach(image => {
   const imgCntr = document.getElementById('imgCntr'); // Div which contains the iamges
   const img = document.createElement("IMG");
   img.src = `${folder}/${image}`;
   imgCntr.appendChild(img)
});

<?php
  $refFolder = "/images/1/";
  function folderList($Path) {
    return  array_slice(scandir($Path,SCANDIR_SORT_ASCENDING), 0); 
  }
  foreach(folderList($refFolder) as $file) { 
    $Z_info = pathinfo($file, PATHINFO_FILENAME);
    $Z_type = pathinfo($file, PATHINFO_EXTENSION);
    if ($Z_type == 'jpg') { 
?>
    <img class="center" 
      src="<? echo $refFolder.$file; ?>" 
      alt="<? echo $Z_info; ?>" 
    />
<?php } } ?>