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);
    });
  }
}

Answer 1

已解决：有问题的项是css类标记class="img-fluid circle"。它的图像尺寸为0px x 0px。因此，图像斑点一直都在正确加载。

关闭案例！