Angularjs, $http.get on image data give special characters

Question

I use a private API using PHP and slim framework. When I get a route which gives me an image datas the response seems to be strange (like charset issue).

The server send the image with readfile() php function:

$src = "image.png";
$this->app->contentType("image/png");
$this->app->response()->status(REQ_OK);
header('Content-length: '.filesize(SITE_PATH.$src));
readfile(SITE_PATH.$src);

On client side I use AngularJS with $http.

$http({
      method: 'GET',
      url: "/myRoute",
      headers: {
               'responseType': "image/png"
      }
)
.success(function(result){
   //treatment
})
.error(function(){

});

On chrome, in the xhr preview i've got this: ![enter image description here][1]

See the screenshot here: https://i.stack.imgur.com/G5Cna.png

if I send data to ng-src of img it doesn't work. Because of the weird encode.

Have you any idea?

Thank you very much

Answer 1

The problem is that you are trying to insert a binary image into the HTML source code which is not possible.

You will either need to form an IMG data URL (see e.g. this question for an example: AngularJS - Show byte array content as image)

Or you need to let the browser do the img loading for you. That would mean creating an <img ng-src="{{imgPath}}" /> where imgPath refers to a variable with content /myRoute.