загрузить все картинки (jpg и png) автоматически из папки по алфавиту

Question

Я загружаю изображения из папки с фотографиями вручную следующим образом:

<div class="container">

 <div class="item">
    <a href="#">
        <img type=file src="photos/01.jpg" />
    </a>
 </div>

 <div class="item">
    <a href="#">
        <img type=file src="photos/04.jpg" />
    </a>
 </div> 

Как я могу автоматически загрузить все изображения (jpg и png) из этой папки по алфавиту?

Изображенияимеют случайные имена, а иногда и jpg или png.

Идея состоит в том, чтобы иметь возможность загружать все изображения из папки без указания количества изображений в папке.Например, если есть 2 изображения, загружаются 2 изображения.3 изображения в папке, загружаются 3 изображения ...

пример названий изображений для отображения: rrededd01.jpg, treddeeda.png, zsa99889.jpg

Спасибо за вашу помощь.

Answer 1

Предположим, что вы не имеете дело с языком на стороне сервера, общий подход будет использовать Javascript для динамического добавления изображений.Вы можете попробовать этот код, заменив предоставленную вами часть;это сгенерирует 4 изображения.Вы можете просто изменить число 4, если у вас есть больше изображений.

<div class="container"></div>

<script>

// Change this if you have more or less than 4 images!
const quantityOfImages = 4;

// Declares an empty string which will save all the images HTML
let images = '';

// Loops to generate the HTML for each image
for(let i = 1; i <= quantityOfImages; i++) {
  // Assigns number; this is to get the number correctly formatted from 01 to 99
  const number = ('0'+i).substr(-2);

  images += `
    <div class="item">
        <a href="#">
            <img type=file src="photos/${number}.jpg" />
        </a>
    </div>
  `;
}

// Now .container has all the images!
document.querySelector('.container').innerHTML = images;

</script>

Answer 2

Если предположить, что HTML генерируется с помощью отдельного языка (PHP, Python, Ruby, C #, Java ...), обычный подход заключается в том, чтобы перетаскивать каталоги, содержащие изображения, циклически перемещаться по записям fs и генерировать IMGтег для каждого.