使用javascript迭代图像文件夹并将结果添加到HTML中 [英] iterating through image folder using javascript and adding the result in HTML

问题描述

嘿我正在试图找到一种方法让我在我的网页上添加一些媒体（图片和视频）。
我有一个部分，我只添加图像和视频，它是基于HTML的所以我想我可以找到一种方法只为每个部分创建一个文件夹，添加该文件夹中的所有媒体，然后让Javascript做的工作。
这是我到目前为止提出的脚本。

Hey I am trying to figure out a way for me to add some media(images and videos) to my webpage. I have a section where I add only images and videos, and it is HTML-based So I thought I could find a way to just create one folder for each section, add all the media in that folder, and then let Javascript do the work. This is the script I have come up with so far.

Javascript

var files = {'jpg':4};
var pageName = "Wimoveh";
for (var ext in files){
for (var i = 0; i < files[ext]; i++){
    var src = "Images/GalleryOne" + pageName + "-" + (i+1) + "." + ext;}
}

此脚本在GalleryOne文件夹中查找带有名称的图片Wimoveh使用' - '作为分隔符，然后遍历匹配该名称和扩展名的所有内容。
我不知道如何在我的HTML中输出结​​果。

This script looks in the folder GalleryOne for the picture with name Wimoveh with a '-' as separator and then iterates through all the content that matches that name and extension. What I dont know is how to output the result in my HTML.

推荐答案

在你的循环中：

var img = new Image(); 
img.src = src;
containerElement.appendChild(img);

其中containerElement是对要添加图像的html元素的引用。
（请注意，您需要延迟直到dom加载为止）

Where containerElement is a reference to the html element you want to add the images to. (note that you'll need to delay until the dom has loaded to do so)

这篇关于使用javascript迭代图像文件夹并将结果添加到HTML中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！