在我的涵盖中级 HTML 和 CSS 以及基本 java 脚本的大学类(class)/模块中(我认为我们还没有做到这一点):我需要使用 HTML、CSS 和可选的 java 脚本作为加分标记来创建一个网站.
我被困在画廊，我想制作一个响应式图像网格(我可以从 https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp 中学习/获得)；但是，我希望有一个本地文件夹，其中包含 100 张图片，我的网站包含 html/css/js 代码，不需要我手动对文件夹中的每张图片进行硬编码。事后看来，我想在所述文件夹中添加和删除图像，并让网站的画廊适应添加/删除的图像。
理论上我假设我需要读入文件夹的内容，放入列表/数组，然后以某种方式解析它们并输出内容。
我找到了两个涉及这个想法的来源: - https://www.html5rocks.com/en/tutorials/file/dndfiles/ - https://github.com/blueimp/JavaScript-Load-Image#meta-data-parsing
我已经搜索了几个小时，我认为这样的代码应该存在于某个地方，我认为我缺乏关于 html、css、js 等和一般术语的知识阻碍了我的搜索，因此任何建议将不胜感激。
预先感谢您的时间和精力。
最佳答案
考虑使用来自存在源图像文件的相应目录的shell 脚本。
你可以简单地用下面的代码创建一个.cmd文件并执行它，它会动态生成一个html文件，你可以在其中显示你想要的图像。
脚本执行命令
echo ^<!doctype html^>^<head^>^</head^>^<body^> >> index.html
for %%j in (*.JFIF, *.png, *.JPG, *.GIF) do echo ^<img src=^"./%%j^" style="width:176px;height:300px" ^> >> index.html
echo ^</body^>^</html^> >> index.html
index.html
<!doctype html><head></head><body>
<img src="./2.jfif" style="width:176px;height:300px" >
<img src="./3.jfif" style="width:176px;height:300px" >
<img src="./4.jfif" style="width:176px;height:300px" >
<img src="./1.png" style="width:176px;height:300px" >
</body></html>
您可以更改 shell 脚本以在轮播等不同元素中显示图像。
关于javascript - 在 html、css 和 js 网站图库中显示来自本地文件的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52807540/