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

Question

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

响应类型是image/jpeg。

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

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);
  }
}

我得到同样的错误。

“{headers：HttpHeaders；responseType：string；}”类型的参数不可分配给“{headers？：HttpHeaders{[header:string]:string string[]；}；观察？：”body“；params？：HttpParams{[param:string]:string string[]；}；ReportProgress？：Boolean；responseType？：”JSON“；With Credentials？：Boolean；}”类型的参数。属性“响应类型”的类型不兼容。类型'string'不能赋值到类型'json''。

Answer 1

要在响应中接收BLOB，必须将responseType参数传递到HTTP get方法中。下面是Angular HttpClient get方法Http get的可用重载-Angular check the Overload#5。