javascript - вывод содержимого папки с активами сайта

Question

У меня есть локальный статический веб-сайт, который я не планирую развертывать где-либо (используйте только локально).

Затем у меня есть папка с ресурсами, которая содержит тысячи изображений.Его путь относительно других файлов сайта известен и не меняется.Я хочу перечислить имена файлов в этой папке (рекурсивно) и сохранить их в массиве javascript.

Конечная цель заключается в отображении изображений и использовании кнопки «следующий / предыдущий» для перемещения между ними.

Давайте предположим, что моя структура папок:

/website
    - index.html
    - scripts.js
    + /images
        - image1.png
        - cat.png
        ...
        - dog.png
        - car.png

Мне нужен массив javascript, загруженный в scripts.js файлы, содержащие имена файлов в папке ./images, для отображения и навигации между ними:

var filenames = read_filenames("./images")

У меня вопрос: как мне написать read_filenames функцию в простом клиентском JavaScript?

Я пытался добавить этот фрагмент кода в index.html до <script src="scripts.js"></script>:

<script type="text/javascript">
    var filenames = <?php $out = array();
    foreach (glob('file/*.html') as $filename) {
        $p = pathinfo($filename);
        $out[] = $p['filename'];
    }
    echo json_encode($out); ?>;
</script>

Но я получаю:

SyntaxError: Unexpected token '<'
SyntaxError: Unexpected token '<'