javascript - 不使用 <img> 标签显示多个图像？

Question

有什么方法可以在 HTML 页面上显示文件夹中的 500 多个图像，而不必写出 500 多个 img src 标签？

在来这里之前我已经用谷歌搜索过这个，但我能找到的唯一结果似乎建议使用 PHP 或称为“glob”的东西，我宁愿尽量不使用它。

是否可以将文件与单独的 .js 文件一起使用，然后使用 HTML 中的脚本来显示图像？

.jpg 和 .png 文件

Answer 1

您可以将图像名称存储在 JavaScript 数组中并使用 forEach列出所有图像，如下所示:

var images = [
  'airplane.png',
  'arctichare.png',
  'baboon.png',
  'barbara.png',
];

var baseUrl = 'https://homepages.cae.wisc.edu/~ece533/images/';

container = document.getElementById("imagesContainer");
function createImages(item, index) {
  container.innerHTML = container.innerHTML + "<img src=\"" + baseUrl + item + "\"/><br/>";
}
images.forEach(createImages);

<div id="imagesContainer"></div>

如果您想自动列出它们，您需要一种服务器脚本语言，例如 PHP。