How to get image from rest api using HttpClient in angular 4

问题

I have a simple cuestion. I have the following service in angular 4 app.

  getProviderPhoto(id:string){
    return this.http.get(this.apiUrl+"/"+id+"/images", {responseType: "blob"});
  }

I need to convert this Blob response to Image file to use the following method:

 createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    this.photo = new File([image],"foto.png",{ type: 'image/png' });
    reader.readAsDataURL(this.photo);
    reader.onload = (event: any) => {
      this.image=event.target.result;
      console.log(this.image);
    }
 }

console.log

data:image/png;base64,ImlWQk9Sd.....

To use the downloaded image to show it in my html:

<div class="profile-image center" [ngStyle]="{ 'background-image': 'url(' + image + ')'}"></div>

On the other hand, if I do this, it works perfectly:

this.image="http://localhost:8083/v1/providers/"+this.id+"/images";

How can I get the same result but using Angular HttpClient.Get?

来源：https://stackoverflow.com/questions/50356471/how-to-get-image-from-rest-api-using-httpclient-in-angular-4