Angular无法查看S3图片，Postman可正常显示该图片

Angular的HttpClient.get()默认会把响应内容当作JSON格式解析，但你的API返回的是二进制图片数据，强行解析二进制为JSON就会触发Unexpected token '�'这类语法错误。

1. 修改TypeScript中的API调用代码 #

更新getFileImage方法，明确指定响应类型为blob（专门处理二进制文件类数据）：

getFileImage() {
  return this.http.get(this.baseUrl + 'FileExplorer/GetImage', { responseType: 'blob' });
}

2. 处理响应并生成可展示的图片链接 #

在订阅请求时，将返回的Blob对象转换成浏览器可识别的Object URL：

// 先在组件类中定义变量
imageUrl: string | null = null;

this.fileExplorer.getFileImage().subscribe(fileBlob => {
  this.imageUrl = URL.createObjectURL(fileBlob);
}, error => {
  console.error(error);
});

注意：组件销毁时记得释放Object URL，避免内存泄漏：

ngOnDestroy() {
  if (this.imageUrl) {
    URL.revokeObjectURL(this.imageUrl);
  }
}

3. 在HTML中展示图片 #

在home.component.html里直接使用生成的URL：

<img [src]="imageUrl" alt="电脑图片" />

如果偏好Base64格式，也可以将Blob转换为Base64，但Object URL的性能更优，尤其适合处理大尺寸图片。

内容的提问来源于stack exchange，提问作者J.C