AngularJS: Dynamic image change inside IMG tag

Question

Using AngularJS with a Node.js server and Express 4 (MEAN), I have a plain input field for typing in the name of an image or a username as a search query which will then be sent to my server. The server responds by sending an image which is then to be dynamically displayed inside an IMG tag next to the input field. Again, the server directly responds by sending the desired image using res.sendfile(res.sendfile(path/image.jpg)).

HTML:

<input type="text" ng-blur="loadImage()" ng-model="imageQUERY">
<img data-ng-src="data:image/jpg,{{remoteDynamicImage}}">

AngularJS:

$http({
   method: 'GET',
   url: '/loadRemoteImage',
   data: {'url': $scope.imageQUERY}
}).success(function(data, status, headers, config){
  if(data){
     //todo: render received image data inside IMG tag
     $scope.remoteDynamicImage = data;
  }
});

I am pretty much stuck here as the code does not work: the image seems to be transferred (according to firebug) but won't be displayed inside the image tag. What is the last missing ingredient? Do I have to base64 encode the image (like this approach angularJS display base64 image) or is there another way without base64 encoding? I couldn’t find anything helpful in the Angular doc. Thanks for any hint.

Base64 encoding should work quite easily. Just use ng-src and set it dynamically. — Luka Jacobowitz, Mar 31 '16 at 22:26
You probably need to use $compile. Your image data probably gets sent alright, but the DOM doesn't get updated. — Christian Bonato, Mar 31 '16 at 22:28
http://jsfiddle.net/bonatoc/fxr4fqvc/ — but it's not the problem. Is the $http inside a service, or in a controller? — Christian Bonato, Mar 31 '16 at 22:30
Do you see any DOM update in Dev Tools? The src should flash briefly. First try with a classic src="" path. If it works, then data:image doesn't work as expected. — Christian Bonato, Mar 31 '16 at 22:34
http://stackoverflow.com/questions/14979791/angularjs-show-byte-array-content-as-image — Christian Bonato, Mar 31 '16 at 22:38
I revised my description as it was slightly irritating. I do not necessarily enter the actual path of an image but rather a search query for an image into the input field. The server then responds by sending the image, that matches the query. So, there is no actual image path that I could paste inside my nr-src attribute. — Igor P., Mar 31 '16 at 22:42
The image is not base64 encoded yet. Just stored on hd of server. — Igor P., Apr 01 '16 at 08:52
Try converting to base64 before send, have a look at this post http://stackoverflow.com/questions/6182315/how-to-do-base64-encoding-in-node-js — ddepablo, Apr 01 '16 at 09:42
So, in other words: there is no way to do this using only the plain image - without base64 conversion? — Igor P., Apr 01 '16 at 13:25

score 0 · Answer 1 · answered Apr 01 '16 at 16:14

Ok, I solved it employing base64 encoding for my images before sending them to the client.

This is my server side (Node.js) script (excerpt):

[... some operation for selecting the image ...]

return fs.readFileAsync('someFile.jpg')
.then(function(imagefile){
   res.send(imagefile.toString('base64')); 
});

This is my angular controller:

$http({
   method: 'GET',
   url: '/loadRemoteImage',
   data: {'url': $scope.imageQUERY}
}).success(function(data, status, headers, config){
  if(data){
     $scope.remoteDynamicImage = data;
  }
});

This is the IMG tag inside of html page:

<img data-ng-src="data:image/jpeg;base64,{{remoteDynamicImage}}">

Hope it helps someone else who's also struggling with it. Still curious whether this works without base64 encoding, but just plain image data.

AngularJS: Dynamic image change inside IMG tag

1 Answers1