Unable to fetch base64 response in component level (Angular)

Issue

I making a GET API to fetch an image, the response is status 200 and its data is in byte64 format. The problem here is, I was not able to read the response in my component. My component code is below.

 getUserImageById()
  {
    this.userService.getUserProfileById(this.currentUser.id).subscribe((res : Blob)=>
    {
      console.log("working"); // after debugging controller is not comming here and there is no error in console
      console.log(res);
      this.data = res;
    })
  }

I know how to convert base64 to image, but I need to get the response in the component first. Here are my headers in network.

Here is my response

I know I might be sending wrong headers while making the API, any one has any suggestions will be much appreciated. Thanks in adavance.

Solution

I got a solution for this, The response that I am getting is not a json. We should specifically mention the response type while making a request. check the code down below.

getUserProfileById(userId)
{
    return this.http.get(this.url + '/access/getUserProfileById/' + userId, { responseType : 'text'});
}

with that, I got the response in string format. Now I converted that into image format.

getUserImageById()
  {
    this.userService.getUserProfileById(this.currentUser.id).subscribe((res : any)=>
    {
      this.userImage = this.sanitizer.bypassSecurityTrustResourceUrl(`data:image/png;base64, ${res}`);
    })
  }

My html code is below.

<img id="imagePreview" [src]="userImage" alt="profile">

Answered By - Goutham Harshith