最佳答案
假设你已经实现了一个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
你这样使用它:
以前的解决方案存在严重缺陷.我不保证这是完美的,但它实际上已经过测试并且适合我.
你无法返回从http.get获得的observable!我不知道为什么以前的解决方案假设你可以. http.get的observable指示何时从服务器检索数据.但是,还有另一个异步过程必须在此之后完成:对reader.readAsDataURL的调用.因此,您需要创建一个Observable,您将在该过程完成后接下来调用它.
此外,如果您没有立即在图像中添加某些内容,浏览器仍会尝试使用HTTP加载图像,并且您在JavaScript控制台中出现错误.这就是第一个观察到一个空的微小gif图像的observer.next调用的原因.
这种方法的一个问题是,如果图像被多次使用,它将每次加载每个图像.即使浏览器缓存,您也会每次都转换为base64.我创建了一个存储图像的缓存,以便在第一个之后不需要将来的查询.
原文地址:https://www.jb51.cc/html/426281.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。