How to display a dynamic image URL with an Observable token

user_849153 0
Viewed 407

I have an image I need to display using Angular within the ionic mobile framework.

The HTML looks like this:

<div class="avatar-image" [ngStyle]="{'background-image': getAssetImage(item.imageUrl)}"></div>

The existing Angular typescript looks like this:

  public getAssetImage(image) {
    const imagepath = Constants.mediaUrl + '/' + image;
    return "url('" + imagepath + "')";
  }

Recently the image assets have been secured so I need to provide a valid access token to get the image.

There is an existing service which gives me the token as an Observable:

this.authService.getToken()

Ideally what I would really like to do is find a way to add that token as an authorization header but I'm not sure that is possible. I've tried using HTTP interceptors which work fine on an ordinary GET but do not get invoked for CSS 'background-image'.

At this stage what I would settle for is just being able to add the token as a query parameter to the URL so that is looks like this:

https://myserver/myimage.jpg?access_token=theTokenValueThatComesFrom_authService.getToken

I cannot figure how to make this work with the Observable getToken() method.

observable ionic-framework angular typescript
2 Answers

The easiest way to do it would be wrapping your code with a ngIf waiting for the token response, and edit you getAssetImage to also have the token as parameter.

<ng-container *ngIf="token">
<div class="avatar-image" [ngStyle]="{'background-image': getAssetImage(item.imageUrl, token)}"></div>
</ng-container>

So after you have subscribed and got the response to the token, the div will render.

user_85121750

You could use the async-pipe to wait for the token observable, and mergeMap to add the image url to that:

HTML:

<div class="avatar-image" [style.backgroundImage]="getAssetImage(item.imageUrl) | async"></div>

TS:

   public getAssetImage(imageUrl: string) {
     return this.authService.getToken().pipe(take(1), mergeMap(token => {
        const imagepath = Constants.mediaUrl + '/' + imageUrl;
        return `url("${imagePath}?access_token=${token}")`
      }
   }
user_20802680
Related