Firebase 的 Google Cloud Functions：如何在 React 中渲染图像响应？

Question

我正在使用 Google Cloud Functions for Firebase (GCFF) 在简单的 React Web 应用程序的后端进行 API 调用。这是一个从维基百科获取图片的简单方法。我相信它成功执行了提取（我从响应中看到浏览器中的 JFIF）。

我在前端和后端之间尝试了许多不同的标头类型、blob() 调用、btoa() 调用等，但我一直无法获得可用的

src

URL

img

标签。最多我会得到一个损坏的图像图标。

我认为这要么是一些微不足道的事情，比如使用请求/响应的错误字段，要么我需要处理转换 Base64 数组。然而，我尝试了很多方法都没有成功，所以我想知道这个 React/Axios/GCFF/Firebase 组合是否有什么独特之处。这是代码的最简单版本：

后端（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);
          });
    });

前端（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}/>
  </>
);

然后

image

组件在 React 组件中渲染。

Answer 1

经过更多的尝试和错误后得到了工作代码。我认为有一些不必要的转换，但它有效。如果我进一步简化，我会发表评论。

后端：

请注意，

r.data

现在是

Buffer.from(r.data, "binary").toString("base64")

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(Buffer.from(r.data, "binary").toString("base64"));
          })
          .catch((e) => {
            response.sendStatus(e);
          });
    });

前端：

使用

.text()

代替

.blob()

有效。

const text = await res.text();
const imageSrc = "data:image/jpeg;base64,"+text;
setImage(
  <>
    <img src={imageSrc}/>
  </>
);