HTML/ 在 HTML 页面中显示图像答案

【问题标题】：HTML/ display images in a HTML pageHTML/ 在 HTML 页面中显示图像
【发布时间】：2013-11-26 13:14:03
【问题描述】：

我创建了一个 HTML 页面。

现在，我尝试在此 HTML 页面中显示特定文件夹 (/folder1) 中的所有图片（注意：我不知道这些图片的名称）。

我尝试创建一个循环，它读取所有这些图像，并将其显示在这个 HTML 中。

有简单的方法吗？

【问题讨论】：

如果您不知道名称，那么您需要使用 server-side 语言 asp.net 或 PHP 例如，扫描目录并将所有图像添加到可以迭代的数组。 HTML 就是 markup。
另一种方法是查看实际网站上的设置以允许用户浏览目录。在 IIS 中，该设置称为“目录浏览”。在 Apache 或 Tomcat 中可能类似。

标签： html

【解决方案1】：

您正在寻找 HTML 无法做到的东西。您将需要某种后端语言，无论是 Rails、PHP、Python 还是其他无关紧要的语言。

HTML 是并且永远只是一种标记语言。

这是一个类似的帖子，其中包含可能对您有所帮助的代码：

How To Display All Images in Folder

【讨论】：

【解决方案2】：

使用 php，您可以使用函数 scandir() 检索目录中的所有文件，并将它们保存为数组。

然后遍历该数组并显示任何图像，例如：

echo '<img src="path/to/folder1/'$files_array[i]'">

其中 $files_array 包含该目录中每个图像文件的名称。

【讨论】：

【解决方案3】：

如果您的图像存储在服务器中，您可以读取目录并获取它们发送到字体端的图像名称。

如果您在本地文件系统中工作，例如

/dir/index.html
/dir/images/
/dir/images/xxx.png
/dir/images/aaa.png
/dir/images/other  image.png

您可以将所有图像批量重命名为 1.png 2.png 3.png ...等等然后在 html 中使用 javascript 来

生成图片

var body = document.getElementsByTagName("body")[0];
for (var i = 0; i < 100; ++i) {
  var img = document.createElement("img");
  img.src = "images/" + i + ".png";
  body.appendChild(img);
}

【讨论】：