how to render image in angular from server in Angular?

Question

i have a spring boot backend ... made a service that returns a byte array image .. how to receive it in Angular and render it...

here's my angular code :

getFile(id) {
const _loadFileByIdUrl = environment.baseUrl + `finance/api/getFile`;
const fd = new FormData();
fd.append('id', id);
return this.http.post<any>(_loadFileByIdUrl, fd
 );
}

i'm trying to console.log() the resoponse is 200 but i got error message : message: "Http failure during parsing for http://localhost:8080/finance/api/getFile"

Possible duplicate of BASE64 to image angular 2

Reactgular
– Reactgular

2019-03-09 18:26:18 +00:00
Commented Mar 9, 2019 at 18:26 — Reactgular
– Reactgular, Commented Mar 9, 2019 at 18:26
is base64 the best format to load an image from a server ?

Helix
– Helix

2019-03-09 18:30:17 +00:00
Commented Mar 9, 2019 at 18:30 — Helix
– Helix, Commented Mar 9, 2019 at 18:30

Jan Wendland · Accepted Answer · 2019-03-09 19:12:36Z

1

Unless you indicate that a different response type is expected, the http client attempts to parse the response as JSON. Use the responseType blob for binary data:

this.http.post(_loadFileByIdUrl, fd, { responseType: 'blob' });

Given that you have an image tag in your template, such as:

<img #smartesImage />

You could then access the image in your template like so

@ViewChild('smartesImage') smartesImage: ElementRef<any>;

And actually display the binary data using the following code:

this.http.post(_loadFileByIdUrl, fd, { responseType: 'blob'}).subscribe(res => {
   const objectURL = URL.createObjectURL(res);
   this.smartesImage.nativeElement.src = objectURL;
});

edited Mar 9, 2019 at 19:12

answered Mar 9, 2019 at 18:36

Jan Wendland

1,45010 silver badges17 bronze badges

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

1 Comment

Helix Over a year ago

when putting this line : this.http.post<any>(_loadFileByIdUrl, fd, { responseType: 'blob' }); i get this error : Type '"blob"' is not assignable to type '"json"

Collectives™ on Stack Overflow

how to render image in angular from server in Angular?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related