React Native(Expo)中如何显示从MS Graph获取的Blob图片？

嘿，我来帮你搞定这个问题！你遇到的核心问题是React Native的<Image>组件没法直接使用Blob对象或者原始的Response对象作为图片源，得做两步转换才能正常显示。

问题根源 #

你当前的代码只是把fetch返回的Response对象存在了状态里，但这个对象不是实际的Blob数据；而且就算拿到了Blob，React Native也不支持直接将Blob作为uri传入Image组件——它只认网络URL、本地文件路径或者data:开头的Base64格式URI。

修正后的完整代码 #

1. 正确获取并转换Blob为Base64 URI

fetch('https://graph.microsoft.com/v1.0/me/photo/$value', {
  headers: { 'Authorization': "Bearer " + accessToken },
})
// 第一步：将响应转换为Blob对象
.then((response) => response.blob())
// 第二步：将Blob转换为Base64格式的data URI
.then((blob) => {
  const fileReader = new FileReader();
  fileReader.onloadend = () => {
    // fileReader.result 就是形如 data:image/jpeg;base64,xxxxxx 的字符串
    this.setState({ imageDataUri: fileReader.result });
  };
  fileReader.readAsDataURL(blob);
})
.catch((error) => {
  console.error('获取图片失败:', error);
});

2. 正确渲染图片

<Image 
  source={{ uri: this.state.imageDataUri }}
  style={{ height: 200, width: null, flex: 1 }}
  resizeMode="contain" // 建议加上，确保图片按比例缩放显示
/>

额外注意事项 #

• 如果你的图片体积较大（比如超过1MB），使用Base64可能会带来内存占用过高的问题，这时候可以考虑用react-native-fs等库将Blob保存到本地文件系统，然后用file://路径引用图片。
• MS Graph返回的用户照片默认是JPEG格式，FileReader.readAsDataURL会自动识别并添加正确的MIME类型前缀，无需手动指定。

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