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

时间:2015-11-07 22:45:12

标签: html image directory

我正在创建一个带有图片滑块(owl carousel)的网站,我正在寻找一种很好的方法将所有图像快速放入我的HTML中。

我希望如此,还有一种输入图像的替代方法,因为我有大约40张图片并手动添加,这将非常繁琐...

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

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

3 个答案:

答案 0 :(得分:3)

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

PHP非常适用于此:您可以使用图像迭代文件夹,并动态添加图像,这样您就不必手动执行此操作。

以下是一个例子:

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

答案 1 :(得分:3)

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

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

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

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

答案 2 :(得分:-1)

我会使用php并创建一个数组和一个foreach循环:

$pictures = array('linkToPicture1', 'linkToPicture2', 'andSoOn');

foreach ($pictures as $picturelink) {
    echo "<img src=".$picturelink.">";
}

编辑foreach循环中的HTML并在$ pictures数组中添加所有链接。