0

我有一组存储在 MongoDb 中的二进制图像：在 此处输入图像描述

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

我在 Express 服务器中使用 mongoose 获取它并通过 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

看起来它正在尝试在某处发送请求。

你能解释一下这里发生了什么吗？我什至不知道用谷歌搜索什么。

4

0 回答 0