How to display a binary image in HTML using AngularJS [duplicate]

Question

I am getting image as binary on rest call using the code below.

vm.profilepicture = function(){

    profileService.bindimage('GET', 1).then(function(response){
        vm.image = response.data;

    });
}

And I have the tag:html for displaying the image as follows:

<div> 
   <img ng-src="data:image/JPEG;base64,{{vm.image}}">
</div>

But unfortunately its not displaying (only showing broken image). In developer console I can see the entire image what I stored in the db

On debugging i can see like

this

Can anyone help me how to display it properly in HTML?

Thanks ebk.

@georgeawg op isn't trying to download the image, they are trying to create a dataURI for displaying it. The linked duplicate doesn't deal with that. — Patrick Evans
– Patrick Evans, Commented Jun 7, 2018 at 17:44
The OP states he is "getting image as binary on rest call". The console shows a corrupt string. If he gets the file as a blob, there is no need to convert it to base64. Simply set the src attribute to the blob. — georgeawg
– georgeawg, Commented Jun 7, 2018 at 18:00
@georgeawg how to get it the image as blob .i set the contentType='blob',but data is coming in same way as binary. in backend api do i need to change anything. response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("image/png"); — ebk
– ebk, Commented Jun 9, 2018 at 6:07

Patrick Evans · Accepted Answer · 2018-06-07 17:57:21Z

0

That is raw binary, the image tag doesn't understand that. You need to put it into a dataURI string which you already partially have. You just didn't convert your binary data to a base64 string, and you do this by using btoa function

vm.image = btoa( response.data );

You can also try telling the request that you expect a blob response and with that you can create a object url for using as the image src

Change HTML to

<image ng-src="{{vm.image}}">

And JS to

//in your actual ajax call
$http.get({responseType: 'blob'})

//and in your response
vm.image = URL.createObjectURL( response.data );

edited Jun 7, 2018 at 17:57

answered Jun 7, 2018 at 17:39

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

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

3 Comments

ebk Over a year ago

after using btoa i am getting this error- Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

Patrick Evans Over a year ago

@ebk in that case try the other method in the edit. You will need to change your ajax call to request the response be in a Blob format instead of raw binary and use createObjectURL to get a src url.

ebk Over a year ago

@ Patrick Evans i think raw data can't be pass to createObjectURL() as like this createObjectURL( response.data ); so i explicitly convert to blob and pass to createObjectURL(blob).so now i am getting one image url as "blob:localhost:3000/331b573e-d601-45b5-ab5c-de24091d0da9".but i am unlucky the problem is still existing .i copied the url and paste it in new tab that time i am getting an image with black background .

Collectives™ on Stack Overflow

How to display a binary image in HTML using AngularJS [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related