Javascript 如何获取要在浏览器中渲染的二进制图像？

我正在尝试获取存储在mongodb数据库中的图像，以便检索并渲染到浏览器。我已经尝试过一些以前的解决方案，比如btoa、window.btoa，但它说这两个都没有定义。 (

我当前的代码如下所示：

<img src= <%= `data:${event.eventImage.mimetype};base64,` + Buffer.from(`${event.eventImage.file}`, 'binary').toString('base64') %> >

>

这将导致上面链接中的输出。二进制文件中有很多我认为不应该存在的“/”。如何正确转换二进制文件以便渲染图像

---

我最终按照@Brad的建议做了。在我看来，我写道：

<img src='http://localhost:3000/public/images/<%=event._id %>' >

就我而言，我的文档结构如下

---

您可以在img src属性中直接使用base64数据，这个答案解释了@NinoFiliu我是如何查看该页面的。我甚至复制并粘贴了我的整个base64字符串（如上面的终端输出链接所示）在JSFIDLE示例中，它仍然没有呈现我的图像。base64本身的二进制文件有问题，但我不确定是什么问题……为什么要这样做？只需从Node.js服务器为图像提供实际的二进制文件。在HTML中，引用Node.js服务器的URL。在sto中添加33%的开销是疯狂的愤怒，额外的内存和CPU开销，零效益和所有大小限制，你现在的做法。@Brad我不太清楚你的意思。我在Nodejs中使用路由，使用mongoose从mongodb获取文件，然后使用ejs将其呈现到视图中……我在本地运行这些，除了mongodb Atlas上的db。@Yates Set up使用类似于

/images/：id

的路由，然后在HTML中使用

。将HTML与图像解耦。然后，在图像路由中，您可以从数据库中获取图像并将其作为图像提供。

router.get('/images/:id', function(req,res){
LCEvent.findById(req.params.id)
    .exec()
    .then(doc =>{
        res.send(doc.eventImage.file);
    })
    .catch(err => console.log(err));
})

{
     eventImage: { 
        file: Binary {...}, 
        filename: 'dreamlifestyle.jpg', 
        mimetype: 'image/jpeg'
    }
}