html - 这种 jpeg 数据是什么？如何将其用作图像标签 src 以在网页中显示它？

Question

我正在 Angular 中工作，试图显示从外部 api 获取的一些图像数据。我尝试了一些方法，例如将此数据转换为 Blob 以显示图像，但我没有任何运气。数据如下所示:

����JFIF��C\t\t\t\n\n\n\n\n\n\t\n\n\n��+��\t\n���}!1AQa"q2���#B��R��$3br�\t\n%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz���������������������������������������������������������������������������?��=��[��4�\r�j���U�t{��|���#&@w��Z�����R.��.��\r>�b��;2\��1#��>��KY�d�����#�;��k��Y\r���8e8S��u��JZ4�p���ֺ?�����19�dkr�j\r��ְ��"��.\to\b�ܗ��m��%�3�iI���j…��?�C�&k��d�=�����}҅@���5j�9m�+�����\Lm�9��~��lU#,W'i��Gn�D ��:b�����Lv�'�޵���.ck�c��<�w�$�!U��#��f��_%�8�f]j�(��2��\n�F�suu br?�Mew4��3��r=s�r��cs�#�ޑ�{ˋ���9<qP��|��I�OmZh7Z����泯�)��d�GR~��{}s<g�����+�Z)���'֦�Q�;�_���jr��ӧ!'��[S�/r�X���yI-�ЎO���ז��h�,����=��\n�?��b4{�aP�fx�����?ah�-�e�s�p7q����^c�,I#�����B��}��\\��_V�z���"i����ZcS�BT �s���}vK(ZY���>�^��o��zZ�m�a��qU�P��rO=�"�'Y�?���V�i��;��Sǵs����v����sI</�9'=sU�[X)݃��kv��\\d7j�ӡ�v�T���

另一条可能有用的信息是，当我从 Postman 调用 api 时，它会在响应正文中正确显示图像。

感谢任何帮助。

谢谢。

编辑: 目前我正在做的是将 jpeg 数据转换为缓冲区，从缓冲区创建一个 blob，使用该 blob 创建一个对象 url 并将该对象 url 分配给图像 src。这一切所做的只是返回无法加载图像图标。

const buffer = Buffer.from(image.data);
const blob = new Blob(buffer.data, { type: 'image/jpeg' });
const image = URL.createObjectURL(blob);
const imageTag = document.getElementById('fullImage');
(imageTag as HTMLImageElement).src = image;

Answer 1

您的 blob 似乎不是有效的 base64。

在模板中你可以这样做:

<img [src]="myImage">

导入 DomSanitizer，在构造函数中定义它，然后清理要作为图像源传递的 Base64 字符串(使用 trustResourceUrl):

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

constructor(private sanitizer: DomSanitizer) { }

base64string: string; // your blob here
myImage: string; // image string to template

blobToImage() {
  this.myImage = this.sanitizer.bypassSecurityTrustResourceUrl('data:image/jpg;base64,' 
                     + base64string);
}