GET Image from API Angular

Question

I am trying to get logo image(any type image, example: jpeg, png, gif) from API I can see image in Network tab but console throws an error as shown in attached image. Any suggestions? I am using htppclient.get and .toPromise() to and Angular latest version.

edit: I also have this header set

    const headers = new HttpHeaders().set('Content-Type', 'application/json');
    return this.getHeaders().append('responseType', 'text');

Incognita · Accepted Answer · 2019-08-22 05:57:54Z

4

If you are receiving 'blob' type from your request you have to change your headers accordingly. Try changing the accept-type from json to image format. Check below code and see if that helps

getImage() {
    let httpHeaders = new HttpHeaders()
         .set('Accept', "image/webp,*/*");

    return this.http.get<Blob>(url, { headers: httpHeaders, responseType: 'blob' as 'json' });
}

After this you can create the image from this data.

answered Aug 22, 2019 at 5:57

Incognita

1038 bronze badges

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

1 Comment

Nimmi Over a year ago

My header was good but I was missing to create image from that. My issue is resolved by creating image. Thank you for your comment that helped me to find out what I was missing.

Tony · Accepted Answer · 2019-08-21 15:51:04Z

3

You should return you http code like this. Blob is the type you want to deal with when working with image file

getImage(imageUrl: string): Observable<Blob> {
  return this.httpClient.get(imageUrl, { responseType: 'blob' });
}

You can view this blog post for more detail

answered Aug 21, 2019 at 15:51

Tony

20.3k7 gold badges42 silver badges62 bronze badges

1 Comment

Nimmi Over a year ago

It shows this error now inside of code. Type '"blob"' is not assignable to type '"json"'.ts(2322) client.d.ts(1075, 9): The expected type comes from property 'responseType' which is declared here on type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: HttpParams | { [param: string]: string | string[]; }; reportProgress?: boolean; responseType?: "json"; withCredentials?: boolean; }'

Nimmi · Accepted Answer · 2019-09-09 20:30:56Z

2

Both answer given below helped me but in my case I was not crating image so once I do GET I than created image and it helped me to solve this issue.

answered Sep 9, 2019 at 20:30

Nimmi

2,0172 gold badges13 silver badges20 bronze badges

Collectives™ on Stack Overflow

GET Image from API Angular

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related