web-dev-qa-db-ja.com

Mongoコレクションのバイナリデータを画像ソースとして使用する

Jadeをビューエンジンとして使用して、mongoにデータを保存するExpressアプリを持っています。特定のコレクション内のドキュメントを取得する簡単なルートがあります。各ドキュメントは製品に対応しています。画像は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経由で）ドキュメントを見ると、これがわかります

enter image description here

enter image description here

別のファイルで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}
        ]
node.jspugnode-mongodb-native
24
Philip O'Brien

問題は、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});
});
_

また、フロントエンドのヒスイのコードに小さな問題があります。次のようになります。

img(src="data:image/jpeg;base64,#{img}") //No + and ''

注：サムネイルなどが小さい場合はこれを回避できますが、いくつかの理由（16MBの制限など）があるため、推奨されるアプローチではありません。 GridFSを使用する方がはるかに優れています。詳細 http://docs.mongodb.org/manual/core/gridfs

16
Rahat Mahbub