У меня есть набор двоичных изображений, хранящихся в 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
Похоже, он пытается куда-то отправить запрос.
Не могли бы вы объяснить, что здесь происходит? Я даже не знаю, что гуглить.