Showing an image that have been received as a Blob object in Angular 5

Question

I'm working on a MEAN Stack app what i want to do is showing an image that's storage in the Data Base so the back-end worked but my real problem is in the front-end Angular so I did this

First receiving the image from the back end I made a service to do that

// Function to get user's profile image
  getProfileImage(){
      let httpHeaders = new HttpHeaders()
                         .set('authorization', this.authToken);
    return this._http.get(this.domain + '/authentication/getProfileImage',{headers :httpHeaders,
      responseType: "blob"});

  }

That receive the image as Blob.

Second is in the component.ts i tried to convert the Blob to a file

imageToShow: any;

getImageFromService() {
      this.authService.getProfileImage().subscribe(data => {
        this.createImageFromBlob(data);
        console.log(data);
      }, error => {
        console.log(error);
      });
}

this is the first method that get the image from the service and with using the console.log(data);

this what I get

Blob(763750) {size: 763750, type: "text/xml"}

and the size of it is the same file length in the Data Base so it worked to.

Now the second method that convert the Blob to an image

createImageFromBlob(image: Blob) {
     let reader = new FileReader();
     reader.addEventListener("load", () => {
        this.imageToShow = reader.result;
        console.log(this.imageToShow);
     }, false);

     if (image) {
        reader.readAsDataURL(image);
     }
  } 

and with console.log(this.imageToShow); what it's showing is this data:text/xml;base64,/9j/4RE6RXhpZgAATU0A a very long string that's a base64 , so i add a console.log(image); in the if and what show me is this

Blob(763750) {size: 763750, type: "text/xml"}

so it didn't do a thing and in the HTML

<img [src]="imageToShow " alt="" class="img">

so what's wrong

Answer 1

This is how i do in Angular 9, downloading file from Rest and displaying.

image: SafeUrl | null = null;

constructor(private sanitizer: DomSanitizer, private api: ApiService) {}

download() {
    const mediaType = 'application/image';
    this.api.download(this.application.cover_photo_id).subscribe(value => {
      const blob = new Blob([value], { type: mediaType });
      const unsafeImg = URL.createObjectURL(blob);
      this.image = this.sanitizer.bypassSecurityTrustUrl(unsafeImg);
    }, error1 => {

    });
}

Api service

download(fileId: string) {
    return this.http.get(Constants.downloadFile + `${fileId}`, {
      responseType: 'blob'
    });
}

Display

<img [src]="image" class="img-fluid rounded" alt="Responsive image">