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

Query asked by user

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ÔøΩ’ÔøΩfiµÔøΩÔøΩÔøΩ.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;

Answer we found from sources

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

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0