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 �Ou���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

您需要将图像数据转换为dataURL:

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

并在您的组件中:

<img [src]="image"/>

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