Если вы хотите загружать изображения из папки динамически (не вводя каждое из них вручную), вам не избежать javascript.Добавление JQuery в микс облегчает, а не сложнее.Не бойтесь использовать jQuery, даже если вы только начинаете изучать javascript.
Чтобы использовать jQuery, все, что вам нужно сделать, это добавить:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
По сути, добавление переменной $, которую вы увидите в следующем коде, обеспечивает простой способ сделать вызов ajax, а также добавить новые элементы img в элемент body.
Созданиеэлемент для каждого изображения в папке (при условии, что он содержит только изображения) должен быть таким простым:
<script type="text/javascript">
var folder = "images"; //TODO: change this to the path to your folder with the images.
$.ajax({
url: folder,
success: function(data) {
$(data).find("a").attr("href", function(i, val) {
$("body").append("<img src='" + folder + '/' + val + "'>");
});
}
});
</script>
В качестве альтернативы, если вы просто хотите избежать необходимости набирать все img элементов вручную и вручную заполните каждый атрибут src, вы можете написать немного javascript, который автоматизирует это.Используя следующий скрипт, вы сможете нажать «Выбрать файлы» и выбрать все изображения в папке, нажать «Открыть», а затем «Перейти», и он сгенерирует HTML для всех элементов img и отобразитЭто.Затем вы можете скопировать этот HTML и вручную вставить его в ваш реальный проект.
<input id="file" type="file" multiple />
<button onClick="go()">Go</button>
<div id="output"></div>
<script type="text/javascript">
function go() {
const fileInput = document.getElementById('file');
const outputDiv = document.getElementById('output');
let html = '';
for (const file of fileInput.files) {
html += '<img src="images/' + file.name + '" />';
}
outputDiv.textContent = html;
}
</script>
https://codepen.io/rockysims/pen/MPEMOG