Отслеживайте папку изображений, чтобы получить живую локальную галерею html/javascript

Короче говоря: вы не можете читать каталог полностью на основе клиента, потому что это было бы кошмаром безопасности: вы могли бы легко просканировать файловую систему пользователя.

Обходной путь: только на основе клиента: требуется предсказуемая схема именования.

Если вы действительно не можете запустить локальный сервер, поддерживающий серверные сценарии, такие как php, ваш единственный шанс, вероятно, состоит в том, чтобы развернуть согласованную схему числовых имен файлов изображений и скрыть несуществующие изображения в представлении галереи, например от img-1 до img-100:

let dir = 'https://picsum.photos/id';
let suffix = '/100/100';
let start = -3;
let end = 3;

// init
loadImages(dir);

// reload
let interval = 60 * 1000;
setInterval(loadImages, interval);


function loadImages(dir) {
  let html = '';

  //reset content
  imageGrid.innerHTML = '';

  for (let i = start; i < end; i++) {
    let src = `${dir}/${i}${suffix}`;
    html +=
      `<a href = "${dir}/${i}${suffix}" data-lg-size = "100-100">
         <img onerror = "this.parentNode.classList.add('broken-image')" src = "${src}">
      </a>`;
  }
  imageGrid.insertAdjacentHTML('beforeend', html);

}

.imageGrid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em;
}

img {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid #ccc;
}

.broken-image {
  display: none;
}

   

<h3>3 images are hidden as they don't exist</h3>
<div id = "imageGrid" class = "imageGrid"></div>

Если изображение не может быть загружено, оно скрыто с помощью функции обратного вызова onerror.

Если вы можете контролировать соглашения об именах файлов — это, вероятно, лучшее, что вы можете получить от 100% клиентского подхода.

Обновление списка файлов

Обновления списка каталогов будут зависеть от повторяющегося вызова метода, например setInterval(). Вы не можете получить правильное обновление в режиме реального времени, и вам, вероятно, следует избегать слишком большого количества обновлений — например, обновление каждую минуту (или каждые 5 минут) более разумно, чем обновление каждую секунду.

Повторная инициализация скриптов галереи

При обновлении галереи вам обычно необходимо инициализировать скрипт галереи (привязка событий лайтбокса и т. д.).

Локальный сервер

Я настоятельно рекомендую установить локальный сервер, обеспечивающий, например, функциональность php. Например, через такое приложение, как xampp, mampp и т. д.

В этом случае вы можете написать скрипт php, отвечающий на вызов JS fetch(), например:

JavaScript
Мы отправляем запрос POST через fetch() на PHP-скрипт, который возвращает список файлов для указанного каталога, включая только определенные типы файлов.

// directory to search for image files
let dir = 'img';

// allowed file extensions
let extensions = ['webp', 'png', 'jpg', 'gif'];

// php script url for directory listing
let phpScan = 'filelist.php';

// update interval: ever minute = 60000ms
let interval = 60 * 1000;

let fileList;

// init async call
(async () => {

    //init
    fileList = await getFilelist(dir, phpScan, extensions);
    updateGallery(fileList);

    setInterval(async () => {
        fileList = await getFilelist(dir, phpScan, extensions);
        updateGallery(fileList)
    }, interval)

})();


// dummy update function
function updateGallery(fileList) {
    console.info(fileList);
}

/**
 * retrieve file directory info 
 * via php script
 */
async function getFilelist(dir, phpScan, extensions) {
    let list = await (await fetch(
        phpScan,
        {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                dir: dir,
                extensions: extensions
            })
        })).json();
    return list;
}

Если вы используете локальный сервер, вы также можете использовать этот подход, как описано в fmacdee: «Как составить список файлов внутри папки с помощью выборки?».

Этот подход предполагает, что на вашем локальном сервере включен список каталогов. Другими словами: сервер автоматически сгенерирует представление таблицы HTML, которое вы можете «проанализировать» с помощью получения результата. Вот модифицированная версия:

async function getDirectory(dir, extensions) {
    let response = await fetch(dir);
    let html = await response.text();
    let doc = new DOMParser().parseFromString(html, 'text/html');
    console.info(doc);

    let files = [...doc.querySelectorAll("a")].map(a => {
        // filter allowed extenstion
        let ext = a.href.split('.').slice(-1)[0];
        if (extensions.includes(ext)) {
            let filename = a.href.split('/').slice(-1)[0];
            let mod = a.parentNode.nextElementSibling.textContent.trim()
            return { filename: filename, href: a.href, mod: mod }
        }
        return
    }
    ).filter(Boolean)

    return files;
}

В общем: настоятельно рекомендую потратить время на установку локального сервера.
Мы определенно не увидим никаких новых функций JS, позволяющих просматривать каталоги на стороне клиента, поскольку это будет иметь огромные последствия для безопасности.