GET data:image/png;base64,{{image}} net::ERR_INVALID_URL

Question

I want to convert image data that I get from server using Angular.js (for use in ionic-framework), I have use this code :

$http.post(link, {
          token: token,
          reservationCode: reservationCode
          }).success(function (res){
            $scope.image = btoa(unescape(encodeURIComponent(res)));

        }).error(function (data) {
          return false;
        }); 

And use this code in my html :

  <img src="data:image/png;base64,{{image}}">

But this error always show :

GET data:image/png;base64,{{image}} net::ERR_INVALID_URL

anybody can help ?

Answer 1

Though a late answer, but will be helpful for future readers:

What you should do is:

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

That would mean that the browser will try to access it only when the data is loaded and will be taken care by AngularJS and hence you will not get that error anymore.