Привет всем!
Подскажите, можно ли через js реализовать подобную выборку?
Есть сайт и файловый менеджер (ФМ) на поддомене, в котором находится, например, 10 изображений с разными именами.
Чтобы разместить их на сайте, достаточно прописать в html
<div class="images">
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item span-2"><img src="240x240" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item span-2"><img src="240x240" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
</div>
Но, чтобы вставить путь к картинке я использую скрипт
document.querySelectorAll(".images img").forEach(el => el.src = 'http://поддомен.сайт.ru/img/' + el.getAttribute('src'));
и в html мне достаточно прописать оставшуюся часть пути
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
grid-gap: 10px;
grid-auto-rows: minmax(120px, auto);
grid-auto-flow: dense;
}
.span-2 {
grid-column-end: span 2;
grid-row-end: span 2;
}
.span-3 {
grid-column-end: span 3;
grid-row-end: span 2;
}
.grid-item {
background-color: #ccc;
}
</style>
<div class="images">
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item span-2"><img src="240x240" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item span-3"><img src="240x240" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
<div class="grid-item"><img src="120x120" alt=""></div>
</div>
<script>
document.querySelectorAll(".images img").forEach(el => el.src = 'https://via.placeholder.com/' + el.getAttribute('src'));
</script>
</body>
</html>
Сайт конечно ругается, что нет картинок, так как они на поддомене, но суть не в этом. Как можно создать массив или какие-то функции, чтобы скрипт доставал файлы напрямую из фм? Т.е. я создам
document.querySelectorAll(".images img").forEach(el => el.src = 'https://via.placeholder.com/' + el.getAttribute('src'));
и, после
el.src = 'https://via.placeholder.com/'
скрипт автоматически подставит [1, 2, 3, 4,...]. Или все равно придется писать название каждого изображения?
Реально ли это?