Firebase云函数：如何在React中渲染图片响应？

核心问题 #

后端使用axios请求图片时，默认以文本格式解析二进制数据，导致图片数据失真，前端接收后无法正常渲染。

修正后的后端代码 #

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

      try {
        // 指定responseType为arraybuffer，确保二进制数据不被转码
        const res = await axios.get(url, { responseType: 'arraybuffer' });
        // 保留原图片的Content-Type头
        const contentType = res.headers['content-type'];
        response.set('Content-Type', contentType);
        // 将arraybuffer转为Buffer发送给前端
        response.send(Buffer.from(res.data));
      } catch (e) {
        response.sendStatus(500);
      }
    });

前端代码（两种可选写法） #

简化写法（直接使用云函数URL） #

// 无需转blob，直接用云函数地址作为img的src
setImage(<img src={testRenderPhotoUrl} />);

保留原blob处理逻辑 #

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

关键修改说明 #

• 给axios请求添加responseType: 'arraybuffer'，避免二进制图片数据被自动转成UTF-8文本，防止数据损坏。
• 后端响应时设置正确的Content-Type，让前端能识别返回的是图片类型。
• 使用Buffer.from()将arraybuffer转为Node.js可处理的Buffer格式发送，确保二进制数据完整传输。

内容的提问来源于stack exchange，提问作者achalla