Question

我有一个基本授权的图片网址，我需要动态加载图片。授权后，图像将作为数据返回。如何使用授权处理此图像。目前我尝试这样

<img [src]=" getImage(res.imageurl) | async" />



  getImage(imageUrl: string): Observable<File> {
   let headers = new HttpHeaders();
headers = headers.append("Authorization", "Basic " + btoa(this.domain + '/' + logindata.username + ':' + logindata.password));
    return this.http
        .get(imageUrl,{headers:headers}, { responseType: ResponseContentType.Blob })
        .map((res: Response) => res.blob());
}

Answer 1

尝试使用授权令牌而不是用户名，密码。

像：

@Component({
    template: `
        <img [src]="img.src + '?bearer=' + bearToken"/>
    `
})
export class FooComponent {
    img = {
        src: 'https://angular.io/assets/images/logos/angular/logo-nav@2x.png'
    }
    bearerToken  = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...';
}

所以图像链接会像这样创建 https://domain/assets/images/xyz.png?bearer=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 ...

Answer 2

如果你想使用httpclient来加载图像数据然后将它呈现在图像标记中，你需要对你得到的blob进行base64编码（或者在服务器端使用base64）然后将它作为{传递给src {3}}字符串如：

<img src="data:image/png;base64,{{encodedImage}}">

Answer 3

您想要从回复中返回数据，但是您没有订阅它......

在.map(...).subscribe(r => {return r;})

之后添加

并在return

之前删除this.http.get

Answer 4

您想要实施interceptor。在intercept（）方法的实现中，您可以检查请求参数，看看这是否是对图片的请求。

Angular5中基本授权的安全图像

4 个答案: