Question

我想将来自api的图像显示为二进制文件数据（如ContentType image / png）

  GetRezeptImage(rezeptid: string, type: string): Observable<any> {
    const headers = new HttpHeaders().set('Accept', 'application/json').set('Token', this.userService.user.token);
    return this.http.get<any>(environment.portalApiUrl + 'Rezept/RezeptImage/' + rezeptid + '?type=' + type, { headers });
  }

this.rezeptService.GetRezeptImage(this.rezeptId, this.type).subscribe(binData => {
      var base64img = 'data:image/png;base64,' + btoa(binData);
      this.image = base64img;
      console.log('bin', binData);
      console.log('b64', base64img);
    });

我在浏览器控制台中收到带有以下消息的HttpErrorResponse异常：错误：SyntaxError：意外的令牌......在XMLHtt的JSON.parse（）位置0处的JSON中，文本：“ PNG ↵↵ IHDR�3��sRGB��... ڽ�v�m��3�vo＃替换��Y'+�ӿ��^�e

有人知道我做错了吗！!

Answer 1

您正在将HTTP标头设置为接受应用程序/ json数据。但是您收到的数据是二进制的。 Angulars HTTP模块将尝试将您的二进制数据转换为JSON但失败，因为它不是有效的JSON。

尝试删除或设置其他内容类型标题

Answer 2

您不希望使用JSON，但需要BLOB。您是这样设置的...

this.httpClient.get('randomurl.com', { responseType: 'blob'}).subscribe(...)

将来自Api的图像显示为base64 img src

2 个答案: