如何让二进制图像在浏览器中呈现？

Posted 2023-03-07

【中文标题】如何让二进制图像在浏览器中呈现？

【英文标题】：How to get an binary image to render in the browser?

【发布时间】：2020-08-02 04:14:09

【问题描述】：

Terminal Output

我正在尝试获取存储在我的 mongodb 数据库中的图像，以便检索并呈现给浏览器。我已经尝试过一些以前的解决方案，例如 btoa、window.btoa，但它说两者都没有定义。 (https://***.com/questions/6182315/how-to-do-base64-encoding-in-node-js)(https://***.com/questions/23097928/node-js-throws-btoa-is-not-defined-error)

我当前的代码如下：

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

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

JSFiddle

【问题讨论】：

您可以直接在 img src 属性中使用 base 64 数据，这个答案解释了How to display Base64 images in html?

@NinoFiliu 我也看过那个页面。我什至将整个 base64 字符串（显示在上面的终端输出链接中）复制并粘贴到 jsfiddle 示例中，但它仍然没有呈现我的图像。 base64 本身的二进制文件有问题，但我不确定出了什么问题......

你为什么要这样做？只需从 Node.js 服务器为您的图像提供实际的二进制文件。在您的 HTML 中，引用您的 Node.js 服务器的 URL。增加 33% 的存储开销、内存和 CPU 的额外开销，以实现零收益和所有大小限制，就像你现在做的那样，这太疯狂了。

@Brad 我不太确定你的意思。我在 Nodejs 中使用路由，使用 mongoose 从 mongodb 获取文件，然后使用 ejs 将其渲染到视图...我在本地运行这一切，除了数据库在 Mongodb Atlas 上。

@Yates 设置一个类似/images/:id的路由，然后在你的HTML中使用<img src="https://node-server.example.com/images/SOME-ID" />。将 HTML 与图像分离。然后，在您的图像路径中，您可以从数据库中获取图像并将其作为图像提供。

【参考方案1】：

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

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

然后我在 Nodejs 中创建了一个路由来处理 /images/:id。

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'