Or Smith
Or Smith

Reputation: 3616

HTML/ display images in a HTML page

I created a HTML page.

Now, I try to display all the pictures that are in a specific folder (/folder1) in this HTML page (Note: I don't know the names of these images).

I try to create a loop, which read all this images, and display it in this HTML.

There is an easy way to do that?

Upvotes: 0

Views: 149

Answers (3)

qiu-deqing
qiu-deqing

Reputation: 1333

if your images are stored in a server you can read the directory and get the image name them send to the font end.

if you are work in a local file system such as

/dir/index.html
/dir/images/
/dir/images/xxx.png
/dir/images/aaa.png
/dir/images/other  image.png

you can rename all images in batch to 1.png 2.png 3.png ...and so on then use javascript in html to

generate the image

var body = document.getElementsByTagName("body")[0];
for (var i = 0; i < 100; ++i) {
  var img = document.createElement("img");
  img.src = "images/" + i + ".png";
  body.appendChild(img);
}

Upvotes: 0

Guillem Cucurull
Guillem Cucurull

Reputation: 1691

With php you can use function scandir() to retrieve all the files in a directory, and save them as an array.

Then iterate over that array and display any image with something like:

echo '<img src="path/to/folder1/'$files_array[i]'">

where $files_array contains the names of every image file in that directory.

Upvotes: 1

Dan Grahn
Dan Grahn

Reputation: 9424

You are looking for something which HTML cannot do. You are going to need some sort of backend language, whether that be Rails, PHP, Python, or something else doesn't really matter.

HTML is and always will be only a Markup Language.

Here is a similar post which has code that might help you:

How To Display All Images in Folder

Upvotes: 3

Related Questions