Search code examples
javascriptangularjsnode.jsmongodbmulter

How to display image in angular(image uploded in server side uploads folder and angularjs is working in different server)?

I uploaded image using multer,node.js,mongodb.

I uploaded the image in upload folder and I stored the path in MongoDB.

this is my folder structure

enter image description here

server is running 

http://localhost:3000/images/590051dcc90cf702e452b9c1

based on document id I am retriving document

// To get the single image/File using id from the MongoDB
app.get('/images/:id', function(req, res) {

//calling the function from index.js class using routes object..
routes.getImageById(req.params.id, function(err, genres) {
if (err) {
throw err;
}
//res.download(genres.path);
res.send(genres)
});
});

I got response like this 

{"_id":"590051dcc90cf702e452b9c1","path":"uploads\login.jpg","name":"asdf","email":"[email protected]","originalname":"login.jpg","__v":0}

I am sending the above response to angular and andriod application.

now I want to display this image in angular .

angular server is working in diffrent server node server is working in different server

i put like this

</head><body>
<body ng-controller="RegisterCtrl" ng-app="myApp">
 <div ng-init="signin()">
 <img ng-src="{{response.path}}"/>
   {{response}}
    </div>
</body>

<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js'></script>
<script>var myApp = angular.module('myApp', []);
myApp.controller('RegisterCtrl', function ($scope,$http) {

$scope.signin = function()

{

$http.get('http://localhost:3000/images/590051dcc90cf702e452b9c1').success(function(data, response)
{
$scope.response  = data;
console.log(data);
}); 

}
});
</script>
</body></html>

i am getting error

file:///C:/Users/mohan/Desktop/uploads/login.jpg net::ERR_FILE_NOT_FOUND

bcoz file is located in server side

Solution

  • On Node JS server convert the get api method to fetch the image path from Mongo Db and return the byte array of the image.

    // To get the single image/File using id from the MongoDB
app.get('/images/:id', function(req, res) {

        //calling the function from index.js class using routes object..
        routes.getImageById(req.params.id, function(err, genres) {
             if (err) {
                 throw err;
             }
             //res.download(genres.path);
             var fs = require('fs');
             // read binary data
             var bitmap = fs.readFileSync(genres.path);
             // convert binary data to base64 encoded string
             //res.send(new Buffer(bitmap).toString('base64'));
             genres.path = new Buffer(bitmap).toString('base64');

             res.send(genres)
           });
});

    Bind this byte array to your tag.

      <img ng-src="{{'data:image/png;charset=utf-8;base64,' + response.data.path}}">