如何使用 Angular HttpClient 以直观的方式获取图像？答案

【问题标题】：How can I fetch an image in an intuitive way using Angular HttpClient?如何使用 Angular HttpClient 以直观的方式获取图像？
【发布时间】：2020-04-20 15:08:36
【问题描述】：

我有一个返回图像的后端。我可以在浏览器中调用这个后端。图像显示出来，一切OK。

响应类型为image/jpeg。

现在，我正在研究如何使用 Angular HttpClient 获取图像的选项。

如果我尝试只发出 GET 调用，我可以在浏览器的“网络”选项卡中看到下载的图片很好。

然而，Angular 给了我一个错误：

代码：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ThumbnailService {
  private thumbnailUrl = 'http://localhost:8080/thumbnail';

  constructor(private http: HttpClient) { }

  public findOne(classifiedId: number): Observable<any> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Accept': 'image/jpeg',
      })
    };
    return this.http.get<any>(`${this.thumbnailUrl}/${classifiedId}`, httpOptions);
  }
}

据我了解...

Angular 尝试将响应解析为 JSON，因为类型原因
有很多重载方法可用于解析响应，具体取决于我键入响应的方式
如果我使用 Blob 作为返回类型：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ThumbnailService {
  private thumbnailUrl = 'http://localhost:8080/thumbnail';

  constructor(private http: HttpClient) { }

  public findOne(classifiedId: number): Observable<any> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Accept': 'image/jpeg',
      })
    };
    return this.http.get<Observable<Blob>>(`${this.thumbnailUrl}/${classifiedId}`, httpOptions);
  }
}

我得到同样的错误。

看看 Blob 类型，它似乎有一些我目前没有实现的结构性期望......

是否有一种使用 Angular HttpClient 获取图像的简单（r）方法？我错过了什么吗？

设置标头和设置 responseType 会导致编译错误，响应类型为 any 和 Blob：

类型参数 '{ headers: HttpHeaders;响应类型：字符串； }' 不能分配给类型为 '{ headers?: HttpHeaders | { [标题：字符串]：字符串 |细绳[]; };观察？：“身体”；参数？： HttpParams | { [参数：字符串]：字符串 |细绳[]; };报告进度？：布尔值；响应类型？：“json”； withCredentials?：布尔值； }'。属性“responseType”的类型不兼容。类型 'string' 不可分配给类型 '"json"'。

【问题讨论】：

您应该将 responseType 设置为 'blob' 以将图像获取为 Blob。参考 - angular.io/api/common/http/HttpRequest#responseType

标签： angular typescript http

【解决方案1】：

您只是将类型转换为Blob，实际上并未将其解析为 Blob。如果您希望 Angular 将其解析为 Blob，则必须相应地设置 responseType。

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ThumbnailService {
  private thumbnailUrl = 'http://localhost:8080/thumbnail';

  constructor(private http: HttpClient) { }

  public findOne(classifiedId: number): Observable<any> {
    const httpOptions = {
      headers: new HttpHeaders({
        'Accept': 'image/jpeg',
      }),
      responseType: 'blob' // This tells angular to parse it as a blob, default is json
    };
    return this.http.get<Observable<Blob>>(`${this.thumbnailUrl}/${classifiedId}`, httpOptions);
  }
}

例如StackBlitz

【讨论】：

【解决方案2】：

为了在响应中接收 BLOB，您必须将 responseType 参数传递给 HTTP get 方法。以下是 Angular HttpClient get 方法 Http Get-Angular 的可用重载检查重载#5。

【讨论】：