Node.js APIを含むExpressからAngularjsへの応答として画像を表示

Question

サーバーのディレクトリにイメージを保存しようとしましたが、そのパスをmongodbに保存しました。クライアント（Angularjs）が詳細を要求すると、Expressは、あるオブジェクトプロパティがイメージを送信し、残りのオブジェクトプロパティがデータであるオブジェクトの配列を送信する必要があります。まず、mongodbからイメージパスを取得し、サーバーディレクトリからイメージを読み込み、それを残りのデータに追加してレスポンスを送信します。しかし、イメージはバッファ配列として送られ、私のhtmlページはイメージバッファ配列を表示することができません。

は、ここでのデータは、アレイ0である

[ 
    { 
    "found": true 
    }, 
    { 
    "_id": "58564aacbd224fdd2b7ad527", 
    "carName": "sai", 
    "segment": "suv", 
    "rentCost": "1000", 
    "imagePath": { 
     "type": "Buffer", 
     "data": [ 
     255, 
     216, 
     255,........] 
    } 
    } 
] 

以下のようなコード

Expressのコード私はExpressのAPI呼び出しを介して取得

var fs = require('fs'); 
//To view the cars 
app.route('/cars/view') 
    .get(function(req,res){ 

     rentalcars.find().toArray(function(err,docs){ 
      if(err){ 
       res.send([{found:false}]); 
      }else{ 
       var data = []; 
       data.push({found:true}); 
       for(var i=0;i<docs.length;i++){ 
        docs[i].imagePath = fs.readFileSync('./assets/images/'+docs[i].imagePath); 
        data.push(docs[i]); 
       } 

       res.send(data); 
      } 
     }); 
}); 

クライアントコード

<table> 
    <tbody ng-repeat="car in home.cars"> 
    <tr> 
     <img ng-src="data:image/JPEG;base64,{{car.imagePath.data}}"> 
     <td>{{car.carName}}<br/>Segment : {{car.segment}}<br/>Rent : ${{car.rentCost}} /day</td> 
    </tr> 
    </tbody> 

</table> 

レスポンスです私はそれを完全に貼り付けていませんでした。 ExpressからNode.js APIを使用してクライアントにイメージを送信する方法

以下は、イメージをサーバーディレクトリに保存し、そのパスをmongodbに保存するコードです。

var filepath =''; 
    var storage = multer.diskStorage({ //multers disk storage settings 
      destination: function (req, file, cb) { 
       cb(null, './assets/images/'); 
      }, 
      filename: function (req, file, cb) { 
       var datetimestamp = Date.now(); 
       filepath = file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]; 
       cb(null, filepath); 

      } 
     }); 

    var upload = multer({ //multer settings 
         storage: storage 
        }).single('file'); 

    //To add new cars 
    app.route('/cars/add') 
     .post(function(req,res){ 
     //upload images to server/assets/images/ 
     upload(req,res,function(err){ 
      if(err){ 
       res.json({error_code:1,err_desc:err}); 
      } 
      var doc = { 
       carName : req.body.carname, 
       segment : req.body.segment, 
       rentCost : req.body.rentcost, 
       imagePath : filepath 
      } 

      rentalcars.insert(doc,function(err,result){ 
       if(err){ 
        res.json({error_code:1,err_desc:err}); 
       }else{ 
        res.json({error_code:0,err_desc:null}); 
       } 
      }); 
     }); 

    }); 

Answer 1

あなたがディスクに画像を保存しているので、あなたはexpressとangularを使用している、私はイメージを提供し、彼らに正しい方法をロードするためにng-srcを使用するexpress.staticを使用することをお勧めします。
これは、サーバーの負荷を最小限に抑えて実装して処理する最速の方法です。