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

我有一个返回图像的后端。我可以在浏览器中称此后端为fine。图像显示出来，一切正常

响应类型为image/jpeg

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

如果我尝试发出一个GET呼叫，我可以在浏览器的“网络”选项卡中看到下载的图像

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

代码：

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
导出类缩略图服务{
私有thumbnailUrlhttp://localhost:8080/thumbnail';
构造函数（私有http:HttpClient）{}
公共findOne（分类：编号）：可观察{
常量httpOptions={
标题：新的HttpHeaders({
“接受”：“图像/jpeg”，
})
};
返回this.http.get（`${this.thumbnailUrl}/${classifiedId}`，httpOptions）；
}
}

据我所知

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

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
导出类缩略图服务{
私有thumbnailUrlhttp://localhost:8080/thumbnail';
构造函数（私有http:HttpClient）{}
公共findOne（分类：编号）：可观察{
常量httpOptions={
标题：新的HttpHeaders({
“接受”：“图像/jpeg”，
})
};
返回this.http.get（`${this.thumbnailUrl}/${classifiedId}`，httpOptions）；
}
}

我也犯了同样的错误

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

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

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

类型为“{headers:HttpHeaders；responseType:string；}”的参数不能分配给类型为“{headers？：HttpHeaders |{[header:string]：string | string[]；}；observe？：“body”；params？：HttpParams |{[param:string]：string | string[]；}；reportProgress？：boolean；responseType？：“json”；with credentials？：boolean；}”。 属性“responseType”的类型不兼容。 类型“string”不可分配给类型“json”

---

您只是将类型转换为

Blob

，而不是将其实际解析为Blob。如果要将其解析为

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',
      }),
      responseType: 'blob' // This tells angular to parse it as a blob, default is json
    };
    return this.http.get<Observable<Blob>>(`${this.thumbnailUrl}/${classifiedId}`, httpOptions);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
导出类缩略图服务{
私有thumbnailUrlhttp://localhost:8080/thumbnail';
构造函数（私有http:HttpClient）{}
public findOne（classifiedId:number）：可观察的
您只是将类型转换为
Blob
，而不是将其实际解析为Blob。如果您希望将其解析为
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',
      }),
      responseType: 'blob' // This tells angular to parse it as a blob, default is json
    };
    return this.http.get<Observable<Blob>>(`${this.thumbnailUrl}/${classifiedId}`, httpOptions);
  }
}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
从“rxjs”导入{Observable}；
@注射的({
providedIn:'根'
})
导出类缩略图服务{
私有thumbnailUrlhttp://localhost:8080/thumbnail';
构造函数（私有http:HttpClient）{}
公共findOne（Did:编号）：Observable
要在响应中接收BLOB，必须将responseType参数传递到HTTP get方法。以下是Angular HttpClient get方法的可用重载检查重载#5。
要在响应中接收BLOB，必须将responseType参数传递到HTTP get方法。以下是可用的e Angular HttpClient get方法的重载检查重载#5。
您应该将responseType设置为'blob'以将图像提取为blob。请参阅-您应该将responseType设置为'blob'以将图像提取为blob。请参阅-