Отображение двоичного изображения из MongoDB в React через сервер Express - PullRequest
0 голосов
/ 05 мая 2020

У меня есть набор двоичных изображений, хранящихся в MongoDb: введите описание изображения здесь

Binary('/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlh...', 0)

Я получаю его с помощью mon goose на сервере Express и отправляю через API конечная точка:

App.get("/getImages", function(req,res){
Picture.find({},function(err,foundImages){
    if(err){
        console.log(err);
        res.status(409).send(err);
    }else{
        res.status(200).send(foundImages);
    }
});

На интерфейсе я вызываю эту точку из React:

useEffect(() => {

    fetch("/getImages", {
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        }
    })
    .then(response => { return response.json() })
    .then((result) => {
        console.log(result);
        setData(result);
    })

}, []);

Но когда я делаю console.log одного из изображений, я получаю длинный массив целых чисел от 0 до 255 (853514 элементов).

data: (853514) [255, 216, 255, 224, 0, 16, 74, 70, 73, 70, 0, 1, 1, 1, 0, 72, 0, 72, 0, 0, 255, 226, 2, 28, 73, 67, 67, 95, 80, 82, 79, 70, 73, 76, 6...

Я пытаюсь отобразить это изображение в теге img после этого сообщения. Я пробовал различные варианты, но последний из них:

function Gallery(props) {
console.log(props.data.img);
let source = props.data.img.data;
console.log(source);
return (
    <figure className="gallery__item gallery__item--5">
        <img src={`data:image/jpg;base64,${source}`} alt="Gallery item 5" className="gallery__img"/>
        <figcaption className="gallery__item--descr">
            <span className="gallery__item--descr-title">{props.data.title}</span>
            <span className="gallery__item--descr-text">{props.data.description}</span>
        </figcaption>
    </figure>
);

}

экспорт галереи по умолчанию;

Изображение не отображается. В браузере в консоли отображается data:image/jpg;base64,[object Object]:1 GET data:image/jpg;base64,[object Object] net::ERR_INVALID_URL

Похоже, он пытается куда-то отправить запрос.

Не могли бы вы объяснить, что здесь происходит? Я даже не знаю, что гуглить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...