Угловой 2 получить изображение src из авторизованного запроса

Question

Я использую angular2-jwt для авторизации запросов. У меня есть запрос на получение, который извлекает несколько документов из API.

Документ может иметь несколько изображений, которые также должны быть получены с помощью авторизованного запроса. Таким образом, очевидно, что вызов их напрямую не работает.

Я последовал этому примеру: https://stackoverflow.com/a/40862839/909723

у меня есть два вопроса:

Без асинхронном я получаю: GET http://localhost:4200/[object%20Object] 404 (Not Found) И с асинхронном я получаю: недопустимый аргумент «[ object Object] 'для pipe' AsyncPipe 'Я попробовал его с данными: 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

Хотя вы, возможно, потребуется изменить способ, в котором параметры добавляются запроса HTTP (в UrlHelperService) в соответствии с вашей угловой версии 2/4.

Кроме того, необходимо изменить:

Observable 

в

Observable<any> 

все Ауэр на месте.

И

private _result: BehaviorSubject = new BehaviorSubject(null); 

в

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