使用Mongo集合中的二进制数据作为图像源

Question

我有一个使用Express框架开发的应用，将数据存储在Mongo数据库中，并使用Jade作为视图引擎。我有一个简单的路由，用于获取特定集合中的文档，每个文档对应一个产品。该图片是以base64编码的形式存储的。但当我尝试将其呈现为图片时，它无法正常工作。

我的路由如下：

exports.index = function(req, res){
   mongo.getProducts(function(data) {
      res.render('consumer/index', {user: req.session.user, products: data});
   });
};

调用的函数是

exports.getProducts = function(callback) {

   Product.find().exec(function(err, products){
      return callback(products);
   });
};

然后我的 Jade 文件有以下代码

each val in products
  img(src="data:image/png;base64,'+#{val.image.data}+'", alt='Image', style="width: 20px; height: 20px")

直接在Mongo中查看文档（通过Robomongo），我得到了这个：

我不知道我错过了什么，因为在另一个文件中，我使用jQuery datatables来显示文档，而那里的相同方法正确地渲染了图像，这是datatables代码的一部分：

"aoColumns": [
          {"mData": "name"},
          {"mData": "price"},
          {"mData": "category"},
          {"mData": "description"},
          {"mData": "image.data", "mRender": function ( data, type, full ) {
            return '<img src="data:image/png;base64,'+data+'", style="width: 20px; height: 20px"></>'}},
          {"mData": "promoted"},
          {"mData": null}
        ]

- Philip O'Brien

---

你尝试过使用 val.image.data.$binary 访问数据吗？ - Tony

是的，它只是说 val.image.data.$binary 是 undefined。 - Philip O'Brien

你能给我发送一个从缓冲区转换而来的 base64 字符串的示例吗？我无法显示图像。 - Sahin Yanlık

Answer 1

问题在于 val.image.data 提供的不是base64字符串，而是一个缓冲区。因此，您需要先将其转换。以下是我如何使其工作的：

Product.findById('559f6e08b090ca5c5ce6942b', function(err, result) {
    if (err) throw (err);

    var thumb = new Buffer(result.image.data).toString('base64');
    res.render('index', { title: 'Express', img: thumb});
});

另外，你的前端jade代码存在一个小问题，应该是：

img(src="data:image/jpeg;base64,#{img}") //没有+和''

注意：对于小缩略图等情况，您可能可以使用此方法，但由于许多原因（例如16MB限制），这不是推荐的方法。您最好使用GridFS。有关详细信息，请参见http://docs.mongodb.org/manual/core/gridfs

- Rahat Mahbub

---

你好，我尝试在Typescript中执行此操作，但是我无法得到任何结果。const imageString = Buffer.from(doc[9].images[0].toString()).toString("base64");这显示的字符串为：77+977+977+977+9ABBKRklGAAEBAQBIAEgAAO+/ve+/vRPvv71FeGlmAABNTQAqAAAACAAOAQAAAwAAAAEP77+9W++/vQEBAAMAAAABC++/vVvvv70BAgADAAAAAwAACO+/vQEOAAIAAAAEbWRlAAEPAA IAAAAHAAAI77+9ARAAAgAAAAgAAAjvv70BEgADAAAAAQABAAABMQACAAAAEAAACO+/vQEyAAIAAAAUAAAI77+9AhMAAwAAAAEAAS1B77+9aQAEAAAAAQAACO+/ve+/ve+/vQABAAAACAAAE++/ve+/ve+/ vQABAAAACAAAE++/ve+/vRwABwAACAwAAADvv70AAAAAHO+/vQAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAA - Sahin Yanlık