Показать изображение в виде ответа от Express с API Node.js до Angularjs

Question

Я попытался сохранить изображение в каталоге сервера и сохранить его путь в mongodb. Когда клиент (Angularjs) запрашивает данные, Express должен отправить массив объектов, в которых одно свойство объекта отправит изображение, а остальные свойства объекта - данные. Сначала я получил путь изображения от mongodb и прочитал изображение из каталога сервера и добавил его к остальным данным и отправил ответ. Но изображение отправляется как буферный массив, а моя страница html не может отображать массив буфера изображений.

Вот код

Экспресс-код

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> 

Ответ я получаю через вызов экспресс API, как показано ниже

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

где данные массива о f огромных данных, я не вставлял их полностью. Как отправить изображения из Express с помощью API Node.js для клиента.

Ниже приведен код, который сохраняет изображения в каталоге сервера и сохраняет его путь в 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, я рекомендую использовать express.static служить изображения и использовать ng-src, чтобы загрузить их правильный путь.
Это самый быстрый способ реализовать и обслуживать с наименьшей нагрузкой на сервер.