Question

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

  <img src="/images/1/1.jpg" class="center">
  <img src="/images/1/2.jpg" class="center">
  <img src="/images/1/3.jpg" class="center">
  <img src="/images/1/4.jpg" class="center">

我现在有这个，但是我不想每次都写。我想知道我会怎么做。我可以使用JavaScript或php或其他任何方法一次将所有图像放入文件夹中吗？

Answer 1

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 } } ?>

Answer 2

您需要创建一个rest终结点，该终结点将向您返回文件夹中所有图像的列表，然后您可以遍历数组并将图像动态添加到DOM。

例如：

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

从文件夹中以html显示多个图像

2 个答案: