javascript - 动态地将图像从文件夹添加到网站

Question

我有一个网站，其中有一个包含 3 个部分的画廊。每个部分最多有 30 张图像。我会将图像存储在与相关部分相关的文件夹中(即“img/gallery/category1”、“img/gallery/category2”和“img/gallery/category3”)

基本上，我不想编写 html 来显示每个单独的图像，而是希望有一个 javascript 循环，它将在文件夹中查找并显示每个图像，并将 URL 放在预定义的代码片段中，即:

<div class="span4">
  <img src="img/gallery/category1/IMAGE-FILENAME1">
</div>

<div class="span4">
  <img src="img/gallery/category1/IMAGE-FILENAME2">
</div>

...等等，直到处理完文件夹中的所有图像...(另外，我知道我可以对上面的 html 更聪明一点，但我想传达的是，我希望每个找到的图像 url 都位于在重复的代码片段中)。

我仍在 javascript 方面进行培训，所以我想知道是否有办法可以做到这一点？

谢谢

Answer 1

Javascript 无法自行完成此操作...但是，如果您有 XML 或 JSON 格式的图像列表及其各自的位置，您可以使用 ajax 来获取该文件，解析其内容并创建标记。