Convert raw image data to something usable in html

Question

I've seen a couple of posts on here similar to this, but I was unable to find a solution that works so I'm hoping a fresh conversation on the topic might offer some more clarity.

I'm working with the google places api, and when I try to get an image back I'm getting what appears to be raw image data. I have no idea what to do with that and how to make it usable in html. I've tried encoding it in base64 and then applying to the image tag as I've read on certain posts, but it only shows a broken image. On top of the main issue, I don't even seem to have any way of verifying I'm getting a legitimate image back from the api call until/unless I can render it properly in the DOM.

Here's the full code for the api call:

function makeAPICall(url) {
  return fetch(url);
}    
makeAPICall(`http://localhost:5000/places/${searchString}`)
          .then(response => {
            return response.json();
          })
          .then(data => {
            responseObject = data.results;
            renderResult(responseObject[10]);
    
            return responseObject[10];
          })
          .then(responseObject => {
            makeAPICall(`http://localhost:5000/place/image/${responseObject.photos[0].photo_reference}`)
              .then(response => {
    
                return response;
              })
              .then(photoData => {
                console.log(photoData.url);
                const encodedImg = btoa(photoData.url);
    
                bizImage.src = `data:image/jpeg;base64,${encodedImg}`;
              });
          });

The specific bit of code that's trying to deal with the image:

.then(photoData => {
      console.log(photoData.url);
      const encodedImg = btoa(photoData.url);
    
      bizImage.src = `data:image/jpeg;base64,${encodedImg}`;
});

A sample of the raw data being returned (the entire blob is too big to include in the post):

����JFIF��*ExifII*1Google���ICC_PROFILE�mntrRGB XYZ �$acsp���-)�=ޯ�U�xB��ʃ9 descDybXYZ�bTRC�dmdd ��gXYZ hgTRC�lumi |meas �$bkpt �rXYZ �rTRC�tech �vued ��wtptpcprt�7chad�,descsRGB IEC61966-2-1 black scaledXYZ $����curv #(-27;@EJOTY^chmrw|������������������������� %+28>ELRY`gnu|����������������&/8AKT]gqz������������!-8COZfr~���������� -;HUcq~��������� +:IXgw��������'7HYj{�������+=Oat�������2FZn�������  % : O d y � � � � � �  ' = T j � � � � � �"9Qi������*C\u����� & @ Z t � � � � �.Id���� %A^z���� &Ca~����1Om����&Ed����#Cc����'Ij����4Vx���&Il����Ae����@e����

score 0 · Accepted Answer · answered Aug 31 '20 at 17:48

So after a lot of reading and research, I was able to get a better understanding of this API and realize that I was sort of going about it the wrong way. There's a client-side service for places and maps apis that should be used for these kinds of things and actually returns usable data. Full disclosure, I feel the way google has organized their documentation in this regard is pretty terrible, but the info is in there.

score -1 · Answer 2 · answered Aug 27 '20 at 22:48

-1

data:image/gif;base64,${encodedImg}

JFIF is JPEG File Interchange Format.

answered Aug 27 '20 at 22:48

TRT 1968

472
4
10

Good catch and thanks for the response, however I may not understand enough about this topic to know what I should change in that line. I've tried the following: data:image/jpg;base64,${encodedImg}, data:image/jpeg;base64,${encodedImg}, data:image/jfif;base64,${encodedImg} All of those got the same result. Is there something I'm missing? – tganyan Aug 27 '20 at 22:52

Convert raw image data to something usable in html

2 Answers2