如何将文件夹中的所有图像加载到 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&nbsp;$directory = "imagepath";$images = glob($directory . "/*.jpg");foreach($images as $image){&nbsp; echo "<img src=".$image.">";}?>

Answer 2

如果您只想使用纯 HTML 来完成此操作，那将是不可能的。要动态加载所有图像，您必须使用服务器端代码、PHP 或 Javascript（例如通过 Node.js）。