title: Angular 8/9 why authenticated & piped image url returns empty image blob in Typescript
body: <p>I am trying to list images next a list of user from a remote server. The server is secured, so I must send a Jwt token with each request. I have an interceptor that adds a jwt token with each request. So I have used the interceptor in a pipe to authenticate every image  using the [src] tag as follows.</p>
  
  <p><code>&lt;img [src]="user.photo | authenticate | async" /&gt;</code></p>
  
  <p>There are no errors, but only a tiny border is displayed for each image showing that the image is empty.</p>
  
  <p><a href="https://i.stack.imgur.com/NQeA4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NQeA4.png" alt="Sample image result"></a></p>
  
  <p>Here is the usage of the pipe in the template:</p>
  
  <pre><code>&lt;div class="media"&gt;
     &lt;img class="img-fluid circle" [src]="user.photo | authenticate | async" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my Typescript pipe:</p>
  
  <pre><code>import { HttpClient, HttpHeaders } from '@angular/common/http';
  import 'rxjs/add/operator/map';
  import { AuthService } from '../services/auth.service';
  
  @Pipe({
    name: 'authenticate'
  })
  export class AuthImagePipe implements PipeTransform {
  
    constructor(
      private http: HttpClient,
      private authService: AuthService, // our service that provides us with the authorization token
    ) {}
  
    async transform(src: string): Promise&lt;string&gt; {
  
      console.log(src);
  
      const token = this.authService.currentUserValue.token.accessToken;
      const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
      const imageBlob = await this.http.get(src, {headers, responseType: 'blob'}).toPromise();
      const reader = new FileReader();
  
      return new Promise((resolve, reject) =&gt; {
  
        reader.onloadend = () =&gt; resolve(reader.result as string);
        reader.readAsDataURL(imageBlob);
      });
    }
  }
  </code></pre>