如何使用 Observable 令牌显示动态图像 URL

Question

我需要在 ionic 移动框架中使用 Angular 显示一张图片。

HTML 如下所示：

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

现有的 Angular 打字稿如下所示：

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

最近图像资产已得到保护，因此我需要提供有效的访问令牌才能获取图像。

有一个现有服务将令牌作为 Observable 提供给我：

this.authService.getToken()

理想情况下，我真正想做的是找到一种方法将该令牌添加为授权标头，但我不确定这是否可能。我尝试使用 HTTP 拦截器，它在普通 GET 上工作正常，但不会为 CSS 'background-image' 调用。

在这个阶段，我只需要将令牌作为查询参数添加到 URL 中，如下所示：

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

我不知道如何使用 Observable getToken() 方法来完成这项工作。

Answer 1

最简单的方法是使用等待令牌响应的 ngIf 包装您的代码，然后编辑您的 getAssetImage 以将令牌也作为参数。

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

所以在你订阅并得到token的响应后，div就会呈现出来。

Answer 2

您可以使用 async-pipe 等待可观察的令牌，然后使用 mergeMap 将图像 url 添加到其中：

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}")`
      }
   }