如何在React Native的Image组件中同时展示base64及uri格式图片

问题根因 #

之前的写法错误原因是：expo-image-picker默认返回的imageUri是本地文件路径（格式为file:///xxx/xxx.jpg），不是Base64编码内容，直接拼接data:image/jpg;base64,前缀自然无法识别。

最优实现步骤 #

• 第一步：配置expo-image-picker返回参数
  调用图库选择能力时明确开启base64返回，这样选择结果会同时返回本地文件URI和纯Base64编码内容：

const result = await ImagePicker.launchImageLibraryAsync({
  mediaTypes: ImagePicker.MediaTypeOptions.Images,
  allowsEditing: true,
  base64: true, // 开启后返回结果会携带base64字段
  quality: 0.8,
});
if (!result.canceled) {
  const { uri, base64 } = result.assets[0];
  // 可根据业务需求存储uri或者base64
}

• 第二步：封装统一的图片源处理逻辑
  写一个通用工具函数，自动识别输入的资源类型，返回符合Image组件要求的source对象：

const getImageSource = (resource) => {
  // 情况1：输入是已经带前缀的服务端Base64资源
  if (typeof resource === 'string' && resource.startsWith('data:image')) {
    return { uri: resource };
  }
  // 情况2：输入是expo-image-picker返回的纯Base64内容
  if (typeof resource === 'string' && resource.length > 100 && !resource.startsWith('file://') && !resource.startsWith('http')) {
    return { uri: `data:image/jpeg;base64,${resource}` };
  }
  // 情况3：输入是本地文件URI/网络图片URI
  return { uri: resource };
}

• 第三步：组件内直接调用即可

// 不管传入的是服务端base64、picker返回的base64、还是本地/网络uri都可以直接渲染
<Image source={getImageSource(yourImageResource)} style={{ width: 200, height: 200 }} />

性能优化建议 #

如果没有服务端上传Base64的需求，本地展示优先用picker返回的uri直接渲染，不需要转Base64，可减少内存占用，提升加载速度。

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