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屋!