Angular - 将字节数组显示为图像

Question

我有一个返回 byte[] 的 api，我想在我的前端应用程序中将其显示为图像，所以我使用数据 url 来显示图像

this.cardBackgroundService.getImage(event.data.entitlementCertificateNumber, "C003").subscribe(data => {
  this.image = data;
  console.log(this.image);
});

<img src="data:image/png;base64,{{image}}"/>

问题是当我在控制台中显示 api 的响应时，它具有这种格式并且不显示为图像

�PNG �欧���j�000000000H��a��a````````��a��a��a```````��a��a��a````````��a��a��a```````��a��a``````````.r� ����X��V��QS��\����F�`�{lhXnJU��s��iiǯ�O1�;������

Answer 1

你可以这样显示，它对我有用。

导入import { DomSanitizer } from '@angular/platform-browser';

将DomSanitizer 添加到constructor(private sanitizer: DomSanitizer) { }

this.cardBackgroundService.getImage(event.data.entitlementCertificateNumber, "C003")
.subscribe(data => {

  let objectURL = 'data:image/png;base64,' + data;
  this.image = this.sanitizer.bypassSecurityTrustUrl(objectURL);
});

在 HTML 中

<img [src]='image' />

Answer 2

你需要将你的图片数据转换成dataURL：

const reader = new FileReader();
reader.onload = (e) => this.image = e.target.result;
reader.readAsDataURL(new Blob([data]));

在你的组件中：

<img [src]="image"/>

确保在getImage() http get 请求中将responseType 设置为'blob' 类型。