如何将文件夹中的所有图像加载到 HTML 中

Question

我希望将特定文件夹中的所有图像加载到我的网站中。目前，我必须复制并粘贴此 HTML 代码并更改每个单独的文件名。有没有办法可以将每个图像动态加载到同一个 HTML 中？<div class="item">    <div class="item__content">        <img src="img/Underwater/1.jpg" alt="img02" />        <h3 class="item__title">Retro irony sartorial <span class="item__date">05/05/2015</span></h3>        <div class="item__details">            <ul>                <li><i class="icon icon-camera"></i><span>Canon PowerShot S95</span></li>                <li><i class="icon icon-focal_length"></i><span>22.5 mm</span></li>                <li><i class="icon icon-aperture"></i><span>&fnof;/5.6</span></li>                <li><i class="icon icon-exposure_time"></i><span>1/1000</span></li>                <li><i class="icon icon-iso"></i><span>80</span></li>            </ul>        </div>    </div></div>

Answer 1

这同时使用 glob 在您指定的文件路径中搜索 jpg。只需更改文件扩展名（如果需要）和您从中提取图像的图像文件夹。

<?php 

$directory = "imagepath";

$images = glob($directory . "/*.jpg");

foreach($images as $image)

{

  echo "<img src=".$image.">";

}

?>

Answer 2

如果您只想使用纯 HTML 来完成此操作，那将是不可能的。

要动态加载所有图像，您必须使用服务器端代码、PHP 或 Javascript（例如通过 Node.js）。