html - Angular 4图像与不记名标题异步

Question

我的任务是使用授权 header 发出异步图像请求。我有这样的图像路径:

<img src="{{file.src}}"/>

而且我需要将 Bearer Token 添加到此类请求的 header 中。页面包含很多图片，所以 ajax 请求不适合。不知道该怎么做。

Answer 1

假设您已经实现了一个 HttpIntercepter 来添加 header ，这是一个实际可行的解决方案(在 Angular 4 中):

import { Pipe, PipeTransform } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Pipe({
  name: 'secure'
})
export class SecurePipe implements PipeTransform {

  constructor(private http: HttpClient) { }

  transform(url: string) {

    return new Observable<string>((observer) => {
      // This is a tiny blank image
      observer.next('data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==');

      // The next and error callbacks from the observer
      const {next, error} = observer;

      this.http.get(url, {responseType: 'blob'}).subscribe(response => {
        const reader = new FileReader();
        reader.readAsDataURL(response);
        reader.onloadend = function() {
          observer.next(reader.result);
        };
      });

      return {unsubscribe() {  }};
    });
  }
}

你可以这样使用它:

<img [src]="'/api/image/42' | secure | async" />

以前的解决方案存在相当大的缺陷。我不保证这是完美的，但它实际上已经过测试并且对我有用。

您不能返回从 http.get 获得的可观察值!我不知道为什么以前的解决方案假设你可以。 http.get 的 observable 指示何时从服务器检索数据。但是，在此之后还必须完成另一个异步过程:对 reader.readAsDataURL 的调用。因此，您需要创建一个 Observable，您将在该过程完成后调用它。

此外，如果您不立即将某些内容放入图像中，浏览器仍会尝试使用 HTTP 加载图像，并且您会在 JavaScript 控制台中收到错误消息。这就是第一个 observer.next 调用放入空的、微小的 GIF 图像的原因。

这种方法的一个问题是，如果图像被多次使用，它每次都会加载每一个图像。即使浏览器缓存，你每次都会转换为 base64。我创建了一个存储图像的缓存，以便在第一次查询之后不需要以后的查询。