I’m using Google Cloud Functions for Firebase (GCFF) to make my API calls on the backend of my simple React web app. Here’s a simple one that fetches a picture from Wikipedia. I believe it successfully carries out the fetch (I see the JFIF in browser from the response).

I’ve tried many different variations of header types, blob() calls, btoa() calls, etc. between the front-end and back-end, but I haven’t been able to get a usable src URL for an img tag. At best I get a broken image icon.

I assume it’s either something trivial like using the wrong field of the request/response, or that I need to deal with converting a base64 array. However, I’ve tried many approaches with no success, so I’m wondering if there’s something unique about this React/Axios/GCFF/Firebase combo. Here’s the simplest version of the code:

Back-end (Cloud Function for Firebase):

exports.testPhotoRender = onRequest(
    {cors: true},
    (request, response) => {
      const options = {
        method: "GET",
      };
      const url = "https://upload.wikimedia.org/wikipedia/"+
        "commons/7/77/Delete_key1.jpg";

      axios.get(url, options)
          .then((r) => {
            response.send(r.data);
          })
          .catch((e) => {
            response.sendStatus(e);
          });
    });

Front-end (React/JS):

const res = await fetch(testRenderPhotoUrl); // URL for the GCFF
const blob = await res.blob();
const imageUrl = URL.createObjectURL(blob);
setImage(
  <>
    <img src={imageUrl}/>
  </>
);

And then that image component is rendered within the React component.