I have a set of binary images stored in MongoDb: enter image description here
Binary('/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlh...', 0)
I get it with mongoose in Express server and send through API endpoint:
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);
}
});
On the front end I make a call to that point from React:
useEffect(() => {
fetch("/getImages", {
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
.then(response => { return response.json() })
.then((result) => {
console.log(result);
setData(result);
})
}, []);
But when I do console.log of one of the images, I get a long array of integers from 0 to 255 (853514 items).
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...
I'm trying to display that image in img tag following this post. I've tried various options, but the latest one is this:
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>
);
}
export default Gallery;
It doesn't show the image. In the browser in the console it shows data:image/jpg;base64,[object Object]:1 GET data:image/jpg;base64,[object Object] net::ERR_INVALID_URL
It looks like it is trying to send a request somewhere.
Could you please explain what is going on here? I don't even know what to google.
