角4图像与承载标头异步 [英] Angular 4 image async with bearer headers

问题描述

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

My task is to make async image requests with auth headers. I have image paths like this:

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

我需要为此类请求将Bearer Token添加到标头.页面包含许多图像，因此ajax请求不适合. 不知道该怎么做.

And I need to Add Bearer Token to header for such requests. Page contains many images, so ajax requests are don't fit. Have no idea how to do this.

推荐答案

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

Assuming you have implemented an HttpIntercepter to add the header, here's a solution that actually does work (in 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" />

以前的解决方案存在很大的缺陷.我不保证这是完美的，但实际上它已经过测试并且可以为我工作.

The previous solutions were pretty drastically flawed. I don't guarantee that this is perfect, but it is actually tested and working for me.

您无法返回从http.get获得的可观察物！我不知道为什么以前的解决方案认为您可以做到. http.get的可观察值指示何时从服务器检索数据.但是，此后必须完成另一个异步过程:对reader.readAsDataURL的调用.因此，您需要创建一个Observable，然后在该过程完成后调用它.

You can't return the observable you get from http.get! I don't know why the previous solutions assume you can. The observable for http.get indicates when the data is retrieved from the server. But, there is another asynchronous process that has to be completed after that: the call to reader.readAsDataURL. So you need to create an Observable that you will call next on after that process completes.

此外，如果您没有立即在图像中放入任何内容，浏览器仍会尝试使用HTTP加载图像，并且在JavaScript控制台中会出现错误.这就是第一次放置一个空的，微小的GIF图像的observer.next调用的原因.

Also, if you don't put something into the image immediately, the browser will still try to load the image using HTTP and you get an error in your JavaScript console. That's the reason for the first observer.next call that puts in an empty, tiny GIF image.

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

An issue with this approach is that if the image is used more than once it will load each one every time. Even if the browser caches, you do the conversion to base64 every single time. I created a cache that stores the image so that future queries are not needed after the first.

这篇关于角4图像与承载标头异步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！