Angular : show image from REST Service

Issue

After reseaches and tests, I still can't show an image form ReST API on my Angular App. I have images available on my ReST web service, why do I use a ReST service? Because in order to access you need to be authenticated (I use oAuth 2 protocol). When I use POSTMan (ReST client very usefull) everything works great, the image is displayed without doing nothing. But when I try to display it with Angular after a $http it doesn't work.

Here are the headers received form the service :

Content-Length → 51756
Content-Type → image/jpeg; charset=binary
Server → Apache/2.4.9 (Win64) PHP/5.5.12
X-Powered-By → PHP/5.5.12

Here is my Angular code :

var data64 = $base64.encode(unescape(encodeURIComponent(data)));
scope.src = 'data:image/jpeg;charset=binary;base64,' + data64;

and my HTML :

<img ng-src="{{src}}" border="0" />

For information I use angular-base64 (https://github.com/ninjatronic/angular-base64) for the encodage. Without "unescape" and "encodeURIComponent" I have an error, I've tried to remove white spaces but it still doesn't work.

Thank you :)

Solution

Seems that this will not work since you tell the browser that the image data is base64 encoded, but you also transformed it with unescape and encodeURIComponent.

Why don't you fetch your image data into a binary data structure (requires a modern browser), instead of into a string:

$http.get(req, {responseType: "arraybuffer"}).
    success(function(data) {
        $scope.src = 'data:image/jpeg;base64,' + _arrayBufferToBase64(data);
    });

_arrayBufferToBase64 is defined here.

---

A different approach would be to install a request interceptor, recognize the image url and add the oauth headers for this case.

Answered By - wero