选择服务器上的文件路径并在客户端上使用此路径

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')));

这是我的项目结构

这是怎么了？我只想创建一个滑块，以获取服务器提供的图像以及其他信息，例如文件名。