使用 Mongo 集合中的二进制数据作为图像源
Using binary data from Mongo collection as image source
我有一个 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 数据表来显示文档,并且那里的相同方法正确呈现图像,这里是数据表的片段代码
"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}
]
问题是 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}") //No + and ''
注意:对于小缩略图等,您可以不采用此方法,但由于多种原因(例如 16MB 限制),这不是推荐的方法。你最好使用 GridFS。更多内容在 http://docs.mongodb.org/manual/core/gridfs
我有一个 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 数据表来显示文档,并且那里的相同方法正确呈现图像,这里是数据表的片段代码
"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}
]
问题是 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}") //No + and ''
注意:对于小缩略图等,您可以不采用此方法,但由于多种原因(例如 16MB 限制),这不是推荐的方法。你最好使用 GridFS。更多内容在 http://docs.mongodb.org/manual/core/gridfs