如何使用 reactjs 以二进制形式显示来自 mongodb 的图像

Question

这是我在 MongoDB 中的模型

image: {
                data: Buffer,
                contentType: String,
        }

我能够像这样用 EJS 在后端显示它

<% images.map(image => { %>
                                <div>
                                        <img src="data:image/<%=image.image.contentType%>;base64,
                                                <%=image.image.data.toString('base64')%>" alt="Image" style="width:120px;height:120px">
                                </div>
                        <% }) %>

但是，当我尝试使用 reactjs 在前端显示图像时，我不能，这就是我一直在尝试的

   const [ images, setImages ] = useState([]);

        useEffect(() => {
                api.getImages()
                                .then(res => setImages(res.data))
                },[])

        return(
                <Fragment>
                        {images.map(image => (
                            <div key={image._id}>
                                <ul>
                                        <li><img src={`data:image/jpeg;base64,${image.image.data.data}`}/></li>
                                </ul>
                            </div>
                        ))}
                </Fragment>
        )
};

Answer 1

我将从这个 mongo 文档开始：

image: { url: String }

然后你就可以把到处的图片当成一个简单的字符串，不需要解码，数据库上也没有二进制。