将目录中的所有图像放入 HTML

Bél*_*óth 7 html directory image

我正在创建一个带有图像滑块(猫头鹰轮播)的网站,我正在寻找一种快速将所有图像放入 HTML 中的好方法。

我希望有一种输入图像的替代方法,因为我有大约 40 张图片,手动添加它会非常乏味......

你们可以通过建议告诉我生成应用程序或网站或任何东西来帮助我吗?

(我正在使用 Webstorm,但我没有在其中找到任何相应的功能。)

Jon*_*Lam 8

您不能只为此使用 HTML(您问题中唯一的语言标签)。您将需要一种服务器端语言,因为它们可以与服务器交互(例如读取文件系统)。

PHP 非常适合这一点:您可以遍历包含图像的文件夹并动态添加图像,这样您就不必手动执行此操作。

下面是一个例子:

<?php
    $files = scandir('path/to/img/directory/');
    foreach($files as $file) {
        if($file !== "." && $file !== "..") {
            echo "<img src='$file' />";
        }
    }
?>
Run Code Online (Sandbox Code Playgroud)


Mar*_*ged 6

如果文件列表是静态的(您没有提到它们是否是动态创建的)并且您使用的是 Windows,则可以使用这样的简单方法:

for %i in (*.jpg) do echo ^<img src="%i" /^> >> all.html
Run Code Online (Sandbox Code Playgroud)

这将创建一个 all.html 文件,其中包含对您的 jpg 的引用。只需从存储图像的目录中的命令行窗口运行该命令。

如果您需要将 all.html 放在其他地方,请将其移到那里或更改为>> C:\files\html\all.html. 另一种选择是在括号中添加一个路径,例如(C:\files\images\*.jpg) 不要忘记在必要时删除 all.html,因为上面显示的命令将始终附加到现有文件,因此您最终可能会出现重复条目​​。