Angular 2 get image src from authorized request

Question

I'm using angular2-jwt to authorize the requests. I've got a get request which retrieves multiple documents from the API.

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.

I followed this example: https://stackoverflow.com/a/40862839/909723

I've got two questions:

Without the async i get : GET http://localhost:4200/[object%20Object] 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

Part of the template

<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>

I've got a service which uses 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));
    })

  }

}

This is the function called in the template

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

Hope someone can help

Are you fetching image blobs from your service? Or actual image locations? — MikeOne, Jan 20 '17 at 13:12
In other words, what does this return? .get(Config.apiUrl + "/images/" + id + "/thumb.jpg") — MikeOne, Jan 20 '17 at 13:13
You mean the actual image I assume? In that case, this will not work right? .map(res => res.json); — MikeOne, Jan 20 '17 at 13:21
You might want to check out this post: http://stackoverflow.com/questions/36152917/get-image-or-byte-data-with-http — MikeOne, Jan 20 '17 at 13:23
The error i'm getting is : GET http://localhost:4200/null 404 (Not Found). But i know the image exists because i tested it with Postman — Sephen, Jan 21 '17 at 14:45

score 0 · Answer 1 · answered Oct 11 '17 at 12:48

I have faced the same problem and this solution helped: http://blog.jsgoupil.com/request-image-files-with-angular-2-and-an-bearer-access-token

Although you may need to change the way in which options are added to http request (in UrlHelperService) according to your angular version 2/4.

Also you need to change:

Observable

to

Observable<any>

all ower the place.

And

private _result: BehaviorSubject = new BehaviorSubject(null);

to

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

Angular 2 get image src from authorized request

1 Answers1