Angular 2 从授权请求中获取图像 src

Question

我正在使用 angular2-jwt 来授权请求​​。我有一个 get 请求，它从 API 中检索多个文档。

一个文档可以有多个图像，这些图像也需要使用授权请求来获取。所以显然直接用 with 调用它们是行不通的。

我按照这个例子： https //stackoverflow.com/a/40862839/909723

我有两个问题：

没有异步我得到：GET http://localhost:4200/[object%20Object] 404 (Not Found) 和异步我得到： Invalid argument '[object Object]' for pipe 'AsyncPipe' 我用'数据：图像/jpg;' 并且没有

部分模板

<md-card *ngFor="let document of documents">

  <md-toolbar color="accent" *ngIf="getDocName(document)">
    <span class="nowrap">{{getDocName(document)}}</span>
    <span class="country-full-width"></span>
  </md-toolbar>

  <md-card-content>
    <div *ngFor="let image of getImages(document)">
        <img class="image" [src]="getImageSrc(image.image_id) | async" />
    </div>
  </md-card-content>

</md-card>

我有一个使用 angular2-jwt 的服务 - AuthHttp

@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 => {
        return new Blob([res["_body]"]], {
            type: res.headers.get("Content-Type")
        });
    })
    .map(blob => {
        var urlCreator = window.URL;
        return this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(blob));
    })

  }

}

这是模板中调用的函数

getImageSrc(id)
{
  return this.imageService.getImageSrc(id)
      //.subscribe (
      //  data => data,
      //  err => console.log(err)
      //);
}

希望有人能帮忙

Answer 1

我遇到了同样的问题，这个解决方案有所帮助：http://blog.jsgoupil.com/request-image-files-with-angular-2-and-an-bearer-access-token

尽管您可能需要根据您的角度版本 2/4更改将选项添加到 http 请求（在UrlHelperService中）的方式。

您还需要更改：

Observable

到

Observable<any>

所有人都欠这个地方。

和

private _result: BehaviorSubject = new BehaviorSubject(null);

到

private _result: BehaviorSubject<any> = new BehaviorSubject('');