这种 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��br�\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。这只是 return 无法加载图像图标。

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);
}

Answer 2

Angular http 客户端将请求转换为 json，除非您明确告诉它不要这样做。这可能就是为什么您获得的图像数据不是您所期望的。

尝试在获取请求选项中设置 { responseType: 'blob' }。

Answer 3

感谢 Mike 和 Joosep.P 的意见，我了解到我的图像数据在从我的 api 传回时已损坏。我决定放弃从我的 api 调用外部 api，而是从我的 front-end 调用。一旦我这样做了，转换 blob 数据就很容易了。

this.imagingSerivce.getImage(imageId, response.server, response.token).subscribe((response2: any) => {
    const imageTag = document.getElementById('fullImage');
    const reader = new FileReader();
    reader.readAsDataURL(response2);
    reader.onloadend = () => {
        (imageTag as HTMLImageElement).src = '' + reader.result;
    };
});

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

What is this kind of jpeg data and how can I use it as an image tag src to display it in a webpage?

html

jpeg

angular