如何从Angular中的服务器以角度渲染图像？

Question

我有一个 Spring Boot 后端......创建了一个返回字节数组图像的服务...... 如何在 Angular 中接收并渲染它...

这是我的角度代码：

getFile(id) {
const _loadFileByIdUrl = environment.baseUrl + `finance/api/getFile`;
const fd = new FormData();
fd.append('id', id);
return this.http.post<any>(_loadFileByIdUrl, fd
 );
} 

我正在尝试 console.log() 响应为 200，但我收到错误消息：消息：“解析 http://localhost:8080/finance/api/getFile 期间的 Http 失败”

Answer 1

除非您指出需要不同的响应类型，否则 http 客户端会尝试将响应解析为 JSON。对二进制数据使用 responseType blob：

this.http.post(_loadFileByIdUrl, fd, { responseType: 'blob' });

假设您的模板中有一个图像标签，例如：

<img #smartesImage />

然后您可以像这样访问模板中的图像

@ViewChild('smartesImage') smartesImage: ElementRef<any>;

并使用以下代码实际显示二进制数据：

this.http.post(_loadFileByIdUrl, fd, { responseType: 'blob'}).subscribe(res => {
   const objectURL = URL.createObjectURL(res);
   this.smartesImage.nativeElement.src = objectURL;
});