React Native中Blob转Image无法显示问题求助

核心问题定位 #

你的代码在Web环境下可能正常，但React Native的运行环境与浏览器存在差异，FileReader的实现细节可能导致base64转换出现隐性问题；另外硬编码MIME类型也可能与实际图片格式不匹配，导致图片无法解析。

修复方案 #

1. 直接请求base64格式响应（推荐）

跳过Blob转换步骤，直接从服务端获取base64字符串，避免FileReader的兼容问题：

const fetchAndDisplayImage = async () => {
  try { 
    const apiUrl = 'http://mywebsite.com/getImage.php?id=1';

    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Image download failed.');
    }

    // 直接读取响应为base64字符串
    const base64Str = await response.text();
    // 从响应头获取真实的MIME类型，避免硬编码错误
    const contentType = response.headers.get('Content-Type') || 'image/jpeg';
    setImageSource({ uri: `data:${contentType};base64,${base64Str}` });
  } catch (error) {
    console.error('Error fetching and displaying image:', error);
  }
};

2. 优化Blob转base64的方式（兼容原Blob获取逻辑）

如果你必须通过Blob处理，用Promise包装FileReader确保转换流程稳定，同时动态获取MIME类型：

const blobToBase64 = (blob) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });
};

const fetchAndDisplayImage = async () => {
  try { 
    const apiUrl = 'http://mywebsite.com/getImage.php?id=1';

    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Image download failed.');
    }

    const blob = await response.blob();
    const base64Str = await blobToBase64(blob);
    const contentType = response.headers.get('Content-Type') || 'image/jpeg';
    setImageSource({ uri: `data:${contentType};base64,${base64Str}` });
  } catch (error) {
    console.error('Error fetching and displaying image:', error);
  }
};

3. 额外检查项

• 确认服务端返回的响应头Content-Type与图片实际格式一致，比如PNG图片应为image/png
• 确保base64字符串没有被额外编码或截断（可通过日志打印base64Str前100位，与解码网站的内容对比）

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