Как загрузить локальные картинки в json?

Question

[adizh]

У меня есть много картинок, и было бы классно иметь просто json file, откуда через итерацию можно был бы загружать в dom, но я не знаю как локальные картинки в json вставить или загрузить.

Comments

[inFureal]

Браузер не умеет читать файлы на сервере.
Если у тебя есть какой-то backend то там передаешь список урлов на эти картинки и все

Answer 1

[Ternick]

Можно ваши картинки собрать в один json файл. Все картинки желательно оптимизировать под размер и качество)
Дальше их можно сложить в base64 и запаковать в json.

Дальше итерироваться по json и создавать объект дома. Например тег img и указывать src подобным образом.

Answer 2

[Aetae]

JSON, очевидно, для этого не предназначен.
Но если ты собираешь приложение webpack(раз React, то скорее всего), то у него есть фича require.context, которая позволяет забрать все нужные файлики из папки.

const r = require.context('./images/', false, /\.png$/);

const imagesMap = Object.fromEntries(r.keys().map((key) => [key, r(key)]));

console.log(imagesMap);