Question

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

文档可以包含多个图像，这些图像也需要使用授权请求获取。很明显，直接用它们调用它们是行不通的。

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

我有两个问题：

没有异步我得到：GET http://localhost:4200/[object%20Object] 404（未找到）并且使用异步我得到：管道'AsyncPipe'的参数'[object Object]'无效我尝试使用'data：image / 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('');

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

1 个答案: