将原始图像数据转换为 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����

Answer 1

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.

Answer 2

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

JFIF 是 JPEG 文件交换格式。