2013-11-26 4 views
0

Я создал HTML-страницу.HTML/отображать изображения на странице HTML

Теперь, я пытаюсь отобразить все изображения, которые находятся в определенной папке (/ folder1) на этой странице HTML (Примечание: я не знаю названия этих изображений).

Я пытаюсь создать цикл, который читает все эти изображения и отображает его в этом HTML-коде.

Есть простой способ сделать это?

+1

Если вы не знаете названия, то вам нужно использовать 'сервера side' языка' asp.net' или 'PHP', например, в сканировать каталог и добавлять все изображения в массив, который вы можете повторить через. 'HTML' - это просто« разметка ». –

+0

Альтернативой будет просмотр настроек на фактическом веб-сайте, чтобы пользователи могли просматривать каталоги. В IIS параметр называется «Просмотр каталога». Вероятно, это похоже на Apache или Tomcat. –

ответ

1

С PHP вы можете использовать функцию scandir(), чтобы получить все файлы в каталоге, и сохранять их в виде массива.

Затем перебирать этот массив и отображать любое изображение с чем-то вроде:

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

где $ files_array содержит имена каждого файла изображения в этом каталоге.

3

Вы ищете что-то, что HTML не может сделать. Вам понадобится какой-то бэкэнд-язык, будь то Rails, PHP, Python или что-то еще не имеет значения.

HTML является и всегда будет только языком разметки.

Вот аналогичный пост, который имеет код, который может помочь вам:

How To Display All Images in Folder

0

Если ваши изображения хранятся на сервере, вы можете прочитать каталог и получить имя изображения, которое они отправляют на конец шрифта.

если вы работать в локальной файловой системе, например,

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

вы можете переименовать все изображения в партии к 1.png 2.png 3.png ... и так далее, то использовать JavaScript в HTML в

формирования изображения

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); 
} 
Смежные вопросы