current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 1 down vote favorite
1

I've written an api service which fetch a binary data from $http. The problem is I don't know how to used that data to display the image. PS: the binary data is actually an image.

This is my service api

getAvatar: function() {
    return $http({
      method  : 'GET',
      url     : 'domain.com',
      headers : {'Content-Type' : 'application/json'}
    });
  }

My controller

//get avatar
$scope.userAvatar = function() {
    Api.getAvatar()
    .then(function(result) {
        //success
        console.log(result.data); //this is the binary data
        $scope.avatarImage = result.data;
        }

    }, function(result) {
        //errors
    });

};

At first I thought that result that the api will give me is a url but it turns out a binary. Do I have to convert it first?

share|improve this question
    
If your API is built to return binary data, then surely if it is an image and encoded properly, why use ajax? why not simply set this as the src of an IMG element? – Richard Aug 27 '13 at 8:39

3 Answers 3

up vote 3 down vote accepted

I assume your service may be returning the base64 encoded string of data for any image which you then bind it to avatarImage in your controller.

Then simply write in html:

<img ng-src="{{avatarImage}}"/>

share|improve this answer
    
it turns out its pretty straight forward. Haha. thanks for all the help :) – user2720708 Aug 28 '13 at 15:14
up vote 1 down vote

you can do this by creating a new image element

$img=$("<img src='data:image/gif;base64,"+result.data+"'/>"); //Assuming that the image was encoded as base64. Try this

$elem.append($img) whereever you want to insert it

share|improve this answer
up vote 0 down vote

Chek out ngSrc

Here is a example:

 <div ng-controller="Cont">
      <img ng-src="{{imageSource}}">
 </div>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.