如何将Hugging Face API返回的JSON格式Base64图像转为可显示格式

问题分析 #

你调用Hugging Face图像生成API后，得到的是data:application/json;base64,...格式的数据，这是因为后端请求时设置了Accept: "application/json"，API会将图像封装在JSON对象中返回，而非直接返回二进制图片数据。这种格式无法直接在React Native的Image组件中使用，需要先解析出图像的原始Base64编码，再转换为图片类型的Data URI。

解决方案 #

第一步：修复后端请求逻辑 #

修改后端代码，正确提取JSON中的图像Base64编码，生成图片格式的Data URI：

const { prompt } = req.body;
try {
  const inputData = {
    inputs: prompt,
    options: {
      wait_for_model: true,
    },
  };
  const response = await axios({
    url: "https://api-inference.huggingface.co/models/Linaqruf/anything-v3.0",
    headers: {
      Authorization: `Bearer ${process.env.HUGGING_FACE_API_KEY}`,
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    data: JSON.stringify(inputData),
    // 改为json类型直接解析响应，无需手动处理arraybuffer
    responseType: "json",
  });

  // 从API返回的JSON数组中提取图像base64编码
  const imageBase64 = response.data[0].base64;
  // 生成图片格式的Data URI，指定正确的MIME类型
  const img = `data:image/png;base64,${imageBase64}`;
  
  res.status(200).json({ img });
} catch (err) {
  console.log(err);
  return res.status(400).json({ message: "Server Error" });
}

说明：Hugging Face图像生成API返回的是数组结构，第一个元素包含base64字段；若你的模型返回结构不同，可打印response.data确认字段位置。

第二步：React Native端显示图像 #

后端返回data:image/png;base64,...格式的字符串后，直接传入React Native的Image组件即可：

import { Image, useState } from 'react-native';

// 存储后端返回的图像URI
const [imageUri, setImageUri] = useState('');

// 请求后端接口获取图像
const fetchImage = async (prompt) => {
  try {
    const response = await fetch('/your-backend-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ prompt }),
    });
    const data = await response.json();
    setImageUri(data.img);
  } catch (err) {
    console.error(err);
  }
};

// 组件中渲染图像
return (
  <Image
    source={{ uri: imageUri }}
    style={{ width: 300, height: 300 }}
    resizeMode="contain"
  />
);

备选方案：后端直接返回二进制图片（无JSON中转） #

若不想通过JSON中转，可修改后端Accept头为图片格式，直接拿到二进制数据后生成Data URI：

const response = await axios({
  url: "https://api-inference.huggingface.co/models/Linaqruf/anything-v3.0",
  headers: {
    Authorization: `Bearer ${process.env.HUGGING_FACE_API_KEY}`,
    Accept: "image/png", // 直接请求PNG格式的二进制数据
    "Content-Type": "application/json",
  },
  data: JSON.stringify(inputData),
  responseType: "arraybuffer",
});

const base64data = Buffer.from(response.data).toString("base64");
const img = `data:image/png;base64,${base64data}`;
res.status(200).json({ img });

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