angular - Angular 8/9 为什么经过身份验证和管道图像 url 在 Typescript 中返回空图像 blob

Question

我正在尝试在来自远程服务器的用户列表旁边列出图像。服务器是安全的，所以我必须在每个请求中发送一个 Jwt 令牌。我有一个拦截器，它为每个请求添加一个 jwt 令牌。因此，我在管道中使用了拦截器来使用 [src] 标签对每个图像进行身份验证，如下所示。

<img [src]="user.photo | authenticate | async" />

没有错误，但每个图像只显示一个小边框，表明该图像是空的。

这是模板中管道的用法：

<div class="media">
   <img class="img-fluid circle" [src]="user.photo | authenticate | async" />
</div>

这是我的打字稿管道：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { AuthService } from '../services/auth.service';

@Pipe({
  name: 'authenticate'
})
export class AuthImagePipe implements PipeTransform {

  constructor(
    private http: HttpClient,
    private authService: AuthService, // our service that provides us with the authorization token
  ) {}

  async transform(src: string): Promise<string> {

    console.log(src);

    const token = this.authService.currentUserValue.token.accessToken;
    const headers = new HttpHeaders({'Authorization': 'Bearer ' + token});
    const imageBlob = await this.http.get(src, {headers, responseType: 'blob'}).toPromise();
    const reader = new FileReader();

    return new Promise((resolve, reject) => {

      reader.onloadend = () => resolve(reader.result as string);
      reader.readAsDataURL(imageBlob);
    });
  }
}

标签： angularimagepipeinterceptor

Answer 1

已解决：有问题的项目是 css 类标签class="img-fluid circle"。它赋予图像尺寸 0px x 0px。所以图像 blob 一直在正确加载。

结案！