Как подгрузить много фотографий (их имена) в массив, чтобы потом использовать в html?

#javascript #html

Имеется HTML, имеется JavaScript, который создает элементы в HTML.

Также имеется куча фотографий, которые будут подгружаться в HTML. 

Подскажите, как можно фотографии автоматически подгрузить, ибо их много? По крайне
мере их названия (путь к ним), чтобы вставить в src?

Нашел как в JavaScript подключить require('fs'), но нельзя ведь в HTML использовать
require.
    

Ответы

Ответ 1

Не совсем понятен контекст. На сколько я подозреваю, у вас только фронт-енд.

require и библиотека fs - это из Node.js.

Предположу, что ваши фото хранятся в папке img, рядом с index.html и вы имеете следующую
структуру проекта:

.
├── img
|   ├── image1.png
|   └── image2.png
├── script.js
└── index.html


В этом случае, вы можете использовать файлы изображений указав относительный (относительно
index.html) путь к ним. Например:




Но в этом случае вам нужно в вашем script.js заранее создать массив с путями ко всем
картинкам, чтобы потом в цикле их добавить на страницу. Как я понимаю, в этом и проблема.



Чтобы получить имена файлов всех изображений в папке, вам нужно создать сервер на
Node.js, потому что это будет работа с файловой системой. А тут уже вариантов реализаций
может быть много, но схема будет приблизительно такая:


Запускается Node.js сервер, который будет работать как процесс на вашем компьютере;
В браузере вы откроете страницу http://localhost, где будет отрисован ваш index.html
(сервер отправит этот файл в браузер);
Перед отдачей браузеру файла index.html вы можете его модифицировать, и поместить
в него заранее массив путей ко всем изображениям.


Это обширная тема, и я не могу тут описать все возможные варианты реализаций начиная
от установки Node на вашу систему, заканчивая использованием движков html шаблонов,
которые (если сказать коротко) расширяют возможности обычного html.

Вам следует найти информацию по созданию сервера на Node.js. Например тут:


https://learn.javascript.ru/ajax-nodejs
https://webref.ru/dev/first-node-app/http-server


А после этого, возможно, переформулировать ваш вопрос, и описать результат, который
вам нужен.