title: Angular 2 get image src from authorized request
body: <p>I'm using angular2-jwt to authorize the requests. I've got a get request which retrieves multiple documents from the API.</p>
  
  <p>A document can have multiple images which also need to be fetched using an authorized request.
  So obviously calling them directly with  doesn't work.</p>
  
  <p>I followed this example: <a href="https://stackoverflow.com/a/40862839/909723">https://stackoverflow.com/a/40862839/909723</a></p>
  
  <p>I've got two questions:</p>
  
  <p>Without the async i get : GET <a href="http://localhost:4200/[object%20Object]" rel="noreferrer">http://localhost:4200/[object%20Object]</a> 404 (Not Found)
  And with the async i get : Invalid argument '[object Object]' for pipe 'AsyncPipe' I tried it with the 'data:image/jpg;' and without</p>
  
  <p>Part of the template</p>
  
  <pre><code>&lt;md-card *ngFor="let document of documents"&gt;
  
    &lt;md-toolbar color="accent" *ngIf="getDocName(document)"&gt;
      &lt;span class="nowrap"&gt;{{getDocName(document)}}&lt;/span&gt;
      &lt;span class="country-full-width"&gt;&lt;/span&gt;
    &lt;/md-toolbar&gt;
  
    &lt;md-card-content&gt;
      &lt;div *ngFor="let image of getImages(document)"&gt;
          &lt;img class="image" [src]="getImageSrc(image.image_id) | async" /&gt;
      &lt;/div&gt;
    &lt;/md-card-content&gt;
  
  &lt;/md-card&gt;
  </code></pre>
  
  <p>I've got a service which uses angular2-jwt - AuthHttp</p>
  
  <pre><code>@Injectable()
  export class ImageService {
  
   constructor(public authHttp: AuthHttp, public http: Http, public sanitizer: DomSanitizer) {}
  
    getImageSrc(id, type){
      let url = Config.apiUrl + "/images/" + id + "/thumb.jpg"
      let headers = new Headers();
      headers.append('Content-Type', 'image/jpg');
      return this.authHttp.get(url,  {
                      headers: headers,
                      responseType: ResponseContentType.Blob
                  })
      .map(res =&gt; {
          return new Blob([res["_body]"]], {
              type: res.headers.get("Content-Type")
          });
      })
      .map(blob =&gt; {
          var urlCreator = window.URL;
          return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
      })
  
    }
  
  }
  </code></pre>
  
  <p>This is the function called in the template</p>
  
  <pre><code>getImageSrc(id)
  {
    return this.imageService.getImageSrc(id)
        //.subscribe (
        //  data =&gt; data,
        //  err =&gt; console.log(err)
        //);
  }
  </code></pre>
  
  <p>Hope someone can help</p>