Angular - 将字节数组显示为图像 [英] Angular - Display byte array as image

问题描述

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

I have an api that returns a byte[], i want to display it as an image in my front application, so i used data url to display the image

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

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

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

the problem is when i display the response of the api in the console, it has this format and it doesn't display as an image

PNGOu j 000000000H a a``````````a a a```````a a a```````` a a a```````` a代码> a````````..r. X V QS \ ۂ F ` {lhXnJUs iiǯ O1 ;

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

推荐答案

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

You need to convert your image data to a dataURL:

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

在你的组件中:

<img [src]="image"/>

确保在 getImage() http get 请求.

Make sure you set the responseType to be of type 'blob' in your getImage() http get request.

这篇关于Angular - 将字节数组显示为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！