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

Question

我的任务是使用 auth 标头发出异步图像请求。我有这样的图像路径：

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

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

原文由 Katya Makeeva 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设您已经实现了一个 HttpIntercepter 来添加标头，这是一个实际有效的解决方案（在 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，您将在该过程完成后调用 next。

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

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

原文由 Charles 发布，翻译遵循 CC BY-SA 3.0 许可协议