Angular - Display byte array as image

Question

I have an api that returns a byte[], i want to display it as an image in my front application, so i used data url to display the image

this.cardBackgroundService.getImage(event.data.entitlementCertificateNumber, "C003").subscribe(data => {
  this.image = data;
  console.log(this.image);
});

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

the problem is when i display the response of the api in the console, it has this format and it doesn't display as an image

�PNG �Ou��j�000000000H��a��a````````��a��a��a```````��a��a��a````````��a��a��a```````��a��a````````�.r��X��V��QS��\�ۂ��F�`�{lhXnJU��s��iiǯ�O1�;��

i have this error: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range. — Aymen Kanzari
– Aymen Kanzari, Commented May 3, 2019 at 10:30
otherwise this 'might' work: <img src="data:image/png,{{image}}"/>, so just remove the base64 — Poul Kruijt
– Poul Kruijt, Commented May 3, 2019 at 11:02
Refer this link :- <stackoverflow.com/questions/36152917/…> — alevi.dcosta
– alevi.dcosta, Commented Jul 4, 2020 at 18:07
what is the typescript service type for byte? stackoverflow.com/questions/74467236/… — mattsmith5
– mattsmith5, Commented Nov 16, 2022 at 21:28

Hien Nguyen · Accepted Answer · 2019-05-03 10:45:13Z

13

You can display like this, it worked with me.

Import import { DomSanitizer } from '@angular/platform-browser';

Add DomSanitizer to constructor(private sanitizer: DomSanitizer) { }

this.cardBackgroundService.getImage(event.data.entitlementCertificateNumber, "C003")
.subscribe(data => {

  let objectURL = 'data:image/png;base64,' + data;
  this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);
});

In HTML

<img [src]='image' />

answered May 3, 2019 at 10:45

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

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

5 Comments

Aymen Kanzari Over a year ago

i have this error:

data:image/png;base64,%EF%BF%BDPNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%034%00%00%01%EF%BF%BD%08%02%00%00%00r@%EF%BF%BD%EF%BF%BD%00%00%EF%BF%BD%00IDATx%EF%BF%BD%EF%BF%BD%05XU%EF%BF%BD%EF%BF%BD%EF%BF%BD%EF%BF%BD?%EF%BF%BDw%EF%BF%BD%1B%EF%BF%BD%EF%BF%BDw%EF%BF%BDV@%11%0B%0B%EF%BF%BD.% net::ERR_INVALID_URL

Hien Nguyen Over a year ago

you need check your image content, you can see the demo at stackblitz.com/edit/display-image-from-api

mattsmith5 Over a year ago

what is the typescript service type for byte? stackoverflow.com/questions/74467236/…

Dnyaneshwar Jadhav Over a year ago

This is Perfect example, @HienNguyen , thanx for your vital post on stackblitz :) Happy to fix on my side, some folks were mention to append URL, dont know how it works t=in there case, but for me it is huge headache of ALB from AWS, but this way great working for me. thnx again.

Dnyaneshwar Jadhav Over a year ago

@HienNguyen I need to know whats wrong here, can you please help me here as well ? stackoverflow.com/questions/75912311/…

Poul Kruijt · Accepted Answer · 2019-05-03 11:06:58Z

12

You need to convert your image data to a dataURL:

const reader = new FileReader();
reader.onload = (e) => this.image = e.target.result;
reader.readAsDataURL(new Blob([data]));

And in your component:

<img [src]="image"/>

Make sure you set the responseType to be of type 'blob' in your getImage() http get request.

answered May 3, 2019 at 11:06

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

2 Comments

Matexon Over a year ago

So what type of image from AWS should I set in my Spring Boot image field? byte[]? I want to send from backend to the frontend ResponseObject with some fields and also with image field...

mattsmith5 Over a year ago

what is the typescript service type for byte? stackoverflow.com/questions/74467236/…

Collectives™ on Stack Overflow

Angular - Display byte array as image

2 Answers 2

5 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Linked

Related