html– 角度4图像异步与承载标头

概述我的任务是使用auth标头进行异步图像请求.我有像这样的图像路径：<img src='{{file.src}}'/> 我需要为此类请求添加承载令牌到标头.页面包含许多图像,因此ajax请求不适合.不知道该怎么做.最佳答案假设你已经实现了一个HttpIntercepter来添加标题,这里有一个实际工作的解决方案(在Angular 4中)：impor

我的任务是使用auth标头进行异步图像请求.我有像这样的图像路径：

我需要为此类请求添加承载令牌到标头.页面包含许多图像,因此AJAX请求不适合.
不知道该怎么做.最佳答案假设你已经实现了一个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.我创建了一个存储图像的缓存,以便在第一个之后不需要将来的查询.

总结

以上是内存溢出为你收集整理的html – 角度4图像异步与承载标头全部内容，希望文章能够帮你解决html – 角度4图像异步与承载标头所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1123127.html