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

Issue

I’m working in Angular trying to display some image data I’m getting from an external api. I’ve tried a few things like converting this data to a Blob to display an image but I’m not having any luck. This is what the data looks like:

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

Another piece of information that could be helpful is when I call the api from Postman, it displays the image correctly in the response body.

Any help is appreciated.

Thanks.

Edit:
Currently what I am doing is converting this jpeg data to a buffer, creating a blob from the buffer, using that blob to create an object url and assigning that object url to the image src. All this does is return the unable to load image icon.

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;

Solution

Thanks to the input from Mike and Joosep.P I learned that my image data was getting corrupted as it was passed back from my api. I decided to forgo calling the external api from my api and just did it from my front-end instead. Once I did that converting the blob data was easy.

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

Answered By – Brad K

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.