无法使用MEAN Stack显示图像

Question

I am using the MEAN stack and trying to display an image stored in my Mongo database. I believe that the image is correctly stored and being correctly passed to the browser as when I use Web Console and look at the response to my Post the Response Body displays the image.

I have a table and when a row is clicked it makes a call to my controller:

$scope.detailRequest = function(index){
    $scope.selectedRow = index;
    $scope.selected = this.contact;
        $http.post('/DetailRequest', $scope.selected).success(function(response){
            $scope.detailResponse = response;
        });
};

In Node I query Mongo and return the image:

router.post('/DetailRequest', function(request, response) {
  reports
    .findOne({_id : request.body._id})
    .select('img')
    .exec(function (err, research) {
       response.contentType(research.img.contentType);
       response.send(research);   
    });
});

I am using the ng-src for image display. As I mention at the top of the page I can see the image correctly in the Response Body of the Web Console. Thus, I am confident I am getting the image back to the browser.

<img ng-src="{{detailResponse}}">

The image just won't display

Answer 1

You've got your wires crossed a bit here.

ng-src will set the Img src property to a URL. The browser will then load the src URL with a GET request.

<img ng-src="{{someUrlRequestedWithGet}}">

So your Express route should be a GET :

router.get('/DetailRequest/:id', function(request, response) {
   reports
        .findOne({_id : request.params._id})
        .select('img')
        .exec( function  (err, research) {
          response.contentType(research.img.contentType);
          response.send(research);   
   });

Note: instead of putting the id in the body, you put it in the URL.

Hint: Whatever URL is in ng-src should display when pasted into a browser bar.

There's also a way to get the image data from a POST (although that's not really the best use of POST ). But you'll have to get a bit more tactical and use a data-uri

Answer 2

So something on these lines in Angular should work: JavaScript:
$scope.imageData = 'data:image/jpeg;base64' + Base64LongLongString;

Template:
<img ng-src="imageData" />

Let's see why it should work.
<img src=""> expects a uri, so that wouldn't work in your case if we feed uri in this attribute. ng-src with uri would have same problem.

An image with binary data embedded has the src attribute as:
<img src="data:image/jpeg;base64,/9j/Base64LongLongString">
More about this representation at http://ben.lobaugh.net/blog/33713/using-binary-image-data-to-display-an-image-in-html