CODEWITHSUNDEEP
javascriptangulartypescript
Pravu
Pravu

Reputation: 608

Display image from API

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

enter image description here

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

enter image description here

Upvotes: 2

Views: 8205

Answers (3)

David
David

Reputation: 34435

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);
      }
    );

Upvotes: 4

Aakash Garg
Aakash Garg

Reputation: 10979

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

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222582

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);
      }
    );

Upvotes: 1

Related Questions