OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Google Cloud Functions for Firebase: How do I render an image response in React?

  • Thread starter Thread starter achalla
  • Start date Start date
A

achalla

Guest
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):

Code:
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):

Code:
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.

<p>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).</p>
<p>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 <code>src</code> URL for an <code>img</code> tag. At best I get a broken image icon.</p>
<p>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:</p>
<p><strong>Back-end (Cloud Function for Firebase):</strong></p>
<pre><code>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);
});
});
</code></pre>
<p><strong>Front-end (React/JS):</strong></p>
<pre><code>const res = await fetch(testRenderPhotoUrl); // URL for the GCFF
const blob = await res.blob();
const imageUrl = URL.createObjectURL(blob);
setImage(
<>
<img src={imageUrl}/>
</>
);
</code></pre>
<p>And then that <code>image</code> component is rendered within the React component.</p>
 

Latest posts

Top