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

【问题标题】：How can i display an image from mongodb in binary with reactjs如何使用 reactjs 以二进制形式显示来自 mongodb 的图像
【发布时间】：2021-07-27 13:54:05
【问题描述】：

这是我在 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>
        )
};

【问题讨论】：

一般来说，在任何数据库上存储二进制文件都是个坏主意。存储对对象的 url 引用更简单、更便宜。
你能举个例子吗？

标签： javascript node.js reactjs frontend

【解决方案1】：

我将从这个 mongo 文档开始：

image: { url: String }

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

【讨论】：