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.sstatic.net/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

Community · Accepted Answer · 2017-05-23 12:28:31Z

0

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.

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Jan 23, 2015 at 13:49

yankee

41.2k17 gold badges113 silver badges169 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related