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

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 ��+�� }!1AQa"q2��#B��R��$3br� %&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz��?��=��[��4� �j��U�t{��|��#&@w��Z��R.��.�� >�b��;2\��1#��>��KY�d��#�;��k��Y ��8e8S��u��JZ4�p��ֺ?��19�dkr�j ��ְ��"��. o\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�� F�suu br?�Mew4��3��r=s�r��cs�#�ޑ�{ˋ��9�^��o��zZ�m�a��qU�P��rO=�"�'Y�?��V�i��;��Sǵs��v��sIӡ�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;

user_15439733 · Answer

Your blob doesn't seem to be valid base64.

In template you could do:

Import DomSanitizer, define it in the constructor and then sanitize Base64 string you want to pass as your image source (use 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);
}

user_8734360 · Answer

Angular http client converts requests to json unless you explicitly tell it not to. This could be why the image data you're getting isn't what you're expecting.

Try setting { responseType: 'blob' } in the get request options.

user_12287047 · Answer

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

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

3 Answers