выберите путь к файлу на сервере и используйте этот путь на клиенте

Question

Я хочу создать слайдер изображений с несколькими случайно выбранными изображениями.Сначала я хочу прочитать каталог с изображениями на сервере.Указанный путь должен быть сопоставлен с filePath и fileName.

const imgPaths = fs.readdirSync('../Slider/public/images'); // read the images folder
const imgData = imgPaths.map(currentPath => {
    currentPath = `./public/images/${currentPath}`;
    return {
        filePath: currentPath,
        fileName: path.parse(path.basename(currentPath)).name
    };
});

При запросе файла от клиента сервер должен выбрать случайный файл и отправить данные клиенту

router.get('/img', (req, res) => {
    const targetImg = imgData[Math.floor(Math.random() * imgData.length)];
    res.send(targetImg);
});

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

document.addEventListener('DOMContentLoaded', (e) => { // DOM loaded
    imgContainer = document.getElementById('img');
    txtContainer = document.getElementById('txt');
    slide();
});

let imgContainer;
let txtContainer;

function slide(){ // change image every 2 seconds
    updateSlider(getImg());
    setTimeout(() => {
        slide();
    }, 2000);
}

function getImg(){ // get a random image by using AJAX
    const xhReq = new XMLHttpRequest();
    xhReq.open("GET", "/img", false);
    xhReq.send(null);
    return JSON.parse(xhReq.response);
}

function updateSlider(img){
    const { filePath, fileName } = img;
    imgContainer.src = filePath; // update image
    txtContainer.innerHTML = fileName; // update text
}

К сожалению, я получаю эту ошибку

Я использую Express, поэтому я определил статический каталог app.use(express.static(path.join(__dirname, 'public')));

, и это структура моего проекта

Что здесь не так?Я просто хочу создать слайдер, который получает изображения с сервера с дополнительной информацией, такой как имя файла.