Display image from API

Question

I got problem how to display image send by API from backend it not display. And when I console.log, I got this error.

This is my code as your reference.

HTML

<img [src]="imageToShow" style="width:100%;margin-left: -14px;">

Component

ngOnInit() {
  this.getBanner()
}

    getBanner() {
        this.bannerId = {
          confId: 1,
          type: "Banner",
        };
        this.httpService.getBanner(this.bannerId).subscribe(
          (baseImage: any) => {
            let objectURL = "data:image/jpeg;base64," + baseImage.image;
            this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(objectURL);
          },
          (error) => {
            // this.isImageLoading = false;
            console.log(error);
          }
        );
      }

Service

public getBanner(data){
    console.log(data)
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        responseType: 'blob',
        Authorization: 'Bearer '+this.getToken()
      })
    };
    return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,httpOptions);
  }

edit

when I check up Network Response I got this image

I think the API is returing error . It is not at all going to success block . — Harmandeep Singh Kalsi, May 24 '20 at 18:47
When I checkup `Network response` I got image... Refer my question — Pravu, May 24 '20 at 18:53
@David I have add `baseImage.image` But it still not working — Pravu, May 24 '20 at 19:20
Have a look there https://stackoverflow.com/a/55592328 (1st method) and use `baseImage` instead of `baseImage.image` — David, May 24 '20 at 19:56

David · Accepted Answer · 2020-05-24T20:13:32.073

Try this

Step #1

Remove Content-Type header and set responseType to blob in httpOptions, but not in the header part like you did. Now, you should get a blob as a response. Before, angular was trying to parse your response as JSON, hence the error

public getBanner(data){
    console.log(data)
    const httpOptions = {
      headers: new HttpHeaders({
        Authorization: 'Bearer '+this.getToken()
      }),
       responseType: 'blob'
    };
    return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,httpOptions);
  }

Step #2 Use baseImage instead of baseImage.image (the response is a blob, it does not have an image property), and then use createObjectURL to get an image url from the blob. Sanitize that URL like your did

    this.httpService.getBanner(this.bannerId).subscribe(
      (baseImage: Blob) => {

       let objectURL = URL.createObjectURL(baseImage);       
        this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(objectURL);

      },
      (error) => {
        // this.isImageLoading = false;
        console.log(error);
      }
    );

Thanks for your answer but I got this error on `(baseImage)` `Argument of type 'Blob' is not assignable to parameter of type 'string'` — Pravu, May 24 '20 at 20:12
full part `this.imageToShow = this.sanitizer.bypassSecurityTrustUrl(baseImage);` — Pravu, May 24 '20 at 20:13
Oops, corrected sorry : `this.sanitizer.bypassSecurityTrustUrl(objectURL)` — David, May 24 '20 at 20:13

Sajeetharan · Answer 2 · 2020-05-24T19:11:13.393

1

One way to fix this is by Setting the response type to blob

const requestOptions: Object = {
/* other options here */
responseType: 'blob'
}

return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,requestOptions);

and you have to convert your image data to a dataURL:

   this.httpService.getBanner(this.bannerId).subscribe(
      (baseImage: any) => {
         this.imageToShow = baseImage;
      },
      (error) => {
        // this.isImageLoading = false;
        console.log(error);
      }
    );

edited May 24 '20 at 19:11

answered May 24 '20 at 18:47

Sajeetharan

216,225
63
350
396

Thanks for your answer.. But when I add this `responseType: "blob"` i got this error `Cannot find name 'responseType'` – Pravu May 24 '20 at 19:00
it should be set in the requestOptions/httpOptions in your case, check the edit – Sajeetharan May 24 '20 at 19:02
where should I add code for convert image data to dataURL – Pravu May 24 '20 at 19:07
in your component.ts – Sajeetharan May 24 '20 at 19:07
In `getBanner(){}` ? – Pravu May 24 '20 at 19:09
– Sajeetharan May 24 '20 at 19:10
https://stackoverflow.com/questions/50894572/showing-an-image-that-have-been-received-as-a-blob-object-in-angular-5 – Sajeetharan May 24 '20 at 19:11

Aakash Garg · Answer 3 · 2020-05-24T19:19:41.133

1

Change Your getBannerMethod as below :-

getBanner() {
        this.bannerId = {
          confId: 1,
          type: "Banner",
        };
        this.httpService.getBanner(this.bannerId).subscribe(
          (baseImage: any) => {
            const reader = new FileReader();
            const url = reader.readAsDataURL(baseImage.image);
            reader.onloadend = () => this.imageToShow = reader.result;
          },
          (error) => {
            // this.isImageLoading = false;
            console.log(error);
          }
        );
      }

Working Stackblitz :- https://stackblitz.com/edit/angular-yvicvq

edited May 24 '20 at 19:19

answered May 24 '20 at 18:52

Aakash Garg

10,649
2
7
25

error now, can you show me? or can provide a stackblitz? – Aakash Garg May 24 '20 at 19:02
updated code above with a working stackblitz example url – Aakash Garg May 24 '20 at 19:20
check my stackblitz, its works. some problem at your backend. – Aakash Garg May 24 '20 at 19:24
also i believe you should use baseImage not baseImage.image – Aakash Garg May 24 '20 at 19:25
when I add `{responseType: 'blob'}` like this `return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data,httpOptions, {responseType: 'blob'});` I got this error `Expected 2-3 arguments, but got 4` – Pravu May 24 '20 at 19:41
return this.httpClient.post((this.serverUrl + this.basePath + '/landing/conferenceitem'),data, {...httpOptions, responseType: 'blob'}); – Aakash Garg May 24 '20 at 19:43
when I try to display image it come out like this `data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAABHQAAAE5CAYAAADx8` – Pravu May 24 '20 at 19:54
using my code, can you give a stackblitz?? or a git repo? – Aakash Garg May 24 '20 at 19:58

Display image from API

3 Answers3