Динамическое добавление изображения в папку publi c в reactjs

Question

Я разрабатываю приложение для распознавания лиц, для этого мне нужно собрать изображение пользователя для справки, чтобы потом его обнаружить. Я успешно загрузил изображение в MySQL databse.now Мне нужно загрузить изображение в publi c папка в реагировать, чтобы обнаружить изображение в camera.i застрял в загрузке изображения в реагировать publi c folder.help мне избавиться от этой проблемы ..

Это код React, где изображение для быть обнаруженным в переменной imgUrl

detect = async () => {
    const videoTag = document.getElementById("videoTag");
    const canvas = document.getElementById("myCanvas");
    const displaySize = { width: videoTag.width, height: videoTag.height };
    faceapi.matchDimensions(canvas, displaySize);
    //setInterval starts here for continuous detection
    time = setInterval(async () => {
        let fullFaceDescriptions = await faceapi
            .detectAllFaces(videoTag)
            .withFaceLandmarks()
            .withFaceExpressions()
            .withFaceDescriptors();

        const value = fullFaceDescriptions.length;
        this.setState({ detection: value });
        fullFaceDescriptions = faceapi.resizeResults(
            fullFaceDescriptions,
            displaySize
        );
        canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
        //Label Images
        var dummy = ["praveen", "vikranth", "Gokul", "Rahul"];
        const labels = nameArray1;
        // const labels = ["praveen", "vikranth", "Gokul", "Rahul"];
        if (no_of_times <= 0) {
            if (no_of_times === 0) {
                labeledFaceDescriptors = await Promise.all(
                    labels.map(async (label) => {
                        // fetch image data from urls and convert blob to HTMLImage element
                        const imgUrl = `/img/${label}.png`; // for testing purpose
                        // const imgUrl = testImage;
                        const img = await faceapi.fetchImage(imgUrl);
                        const fullFaceDescription = await faceapi
                            .detectSingleFace(img)
                            .withFaceLandmarks()
                            .withFaceExpressions()
                            .withFaceDescriptor();
                        if (!fullFaceDescription) {
                            throw new Error(`no faces detected for ${label}`);
                        }

                        const faceDescriptors = [fullFaceDescription.descriptor];
                        return new faceapi.LabeledFaceDescriptors(label, faceDescriptors);
                    })
                );
                // console.log(no_of_times);
            }
        }

        const maxDescriptorDistance = 0.7;
        no_of_times++;
        const faceMatcher = new faceapi.FaceMatcher(
            labeledFaceDescriptors,
            maxDescriptorDistance
        );

        const results = fullFaceDescriptions.map((fd) =>
            faceMatcher.findBestMatch(fd.descriptor)
        );
        result = [];
        results.forEach((bestMatch, i) => {
            const box = fullFaceDescriptions[i].detection.box;
            // console.log(box)
            const text = bestMatch.toString(); //this for basMatch name detection
            var str = "";
            //This is for removing names confidence to map value without duplicate
            var val = text.replace(/[0-9]/g, "");
            for (let i of val) {
                if (i !== " ") {
                    str += i;
                } else {
                    break;
                }
            }
            if (result.includes(str) === false) result.push(str);

            const drawBox = new faceapi.draw.DrawBox(box, { label: text });

            drawBox.draw(canvas);
            faceapi.draw.drawFaceExpressions(canvas, fullFaceDescriptions, 0.85);
        });

        for (let i = 0; i < fullFaceDescriptions.length; i++) {
            const result1 = fullFaceDescriptions[i].expressions.asSortedArray()[i];
            // console.log(result[i]);
            // console.log(result1.expression);
            this.test(result[i], result1.expression);
        }
    }, 100);

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

это место, где я получаю изображения в base64 от nodejs

axios.get("/image").then((res) => {
        testImage = res.data;
        // console.log("from image" + res.data);
        imgback = <img src={`data:image/jpeg;base64,${res.data}`} />;
    });

Это nodejs код для запроса на получение от reactjs

app.get("/image", (req, res) => {

connection.query("SELECT * FROM images", (error, row, fields) => {
    if (!!error) {
        console.log("Error in the query");
    } else {
        console.log("successful query");

        var buffer = new Buffer(row[0].image, "binary");
        var bufferBase64 = buffer.toString("base64");

        res.send(bufferBase64);

    }
});

});

Моя цель заключается в том, чтобы в переменной imgUrl в коде реагирования мне нужно было указать папку с изображениями, для которой мне нужно динамически добавлять изображение в папку. Или есть какой-либо другой способ напрямую передать массив изображений в переменную imgUrl. Пожалуйста, помогите мне разобраться с этой проблемой.