Expo开发React Native应用，Firebase图片上传后因URL转换报错退出

问题描述 #

使用Expo开发React Native应用时，图片已成功上传至Firebase Storage，但随后出现闪退，报错信息：

JSON value '{assetid ="xx"; fileName ="IMG_8189.PNG"; uri ="file:///var/mobile/cpntainers/Application/"} of type NSMutableDictionary cannot be converted to a valid URL

问题根源 #

上传成功后，你将完整的image对象（包含assetid、fileName、uri等字段的字典）赋值给了importedImage和pickedImage状态。如果后续将这些状态直接传给Image组件的source属性，React Native会尝试把整个字典解析成URL，从而触发报错导致闪退。上传流程本身正常，闪退发生在渲染阶段。

解决方案 #

1. 修正状态赋值逻辑 #

将状态设置为图片的uri字符串，而非整个image对象：

if (!image.cancelled) {
  setImportedImage(image.uri); // 仅存储uri字符串
}
// ...
setPickedImage(image.uri); // 仅存储uri字符串

2. 确保Image组件正确接收数据源 #

使用状态渲染图片时，需传入包含uri字段的对象：

<Image source={{ uri: importedImage }} style={{ width: 200, height: 200 }} />

3. 优化上传代码细节 #

• 替换image.name为image.fileName：Expo ImagePicker返回的文件名字段是fileName，而非name，避免存储路径错误；
• 添加uri类型检查：提前拦截无效路径，避免后续错误。

修改后的完整代码 #

import * as ImagePicker from 'expo-image-picker';
import { ref, uploadBytesResumable } from 'firebase/storage';

const pickImageAsync = async () => {
  const image = await ImagePicker.launchImageLibraryAsync({
    allowsEditing: false,
    quality: 1,
  });

  if (image.cancelled) {
    alert("你未选择任何图片。");
    return;
  }

  // 检查图片路径是否为有效字符串
  if (typeof image.uri !== 'string') {
    alert('无法获取有效图片路径');
    return;
  }

  // 仅存储图片uri字符串到状态
  setImportedImage(image.uri);
  setPickedImage(image.uri);

  try {
    const response = await fetch(image.uri);
    const blob = await response.blob();

    // 使用image.fileName作为存储文件名
    const storageRef = ref(storage, `profiles/${image.fileName}`);
    const uploadTask = uploadBytesResumable(storageRef, blob);

    await uploadTask;

    console.log("图片已成功上传至Firebase Storage");

  } catch (error) {
    console.error("上传图片至Firebase Storage时出错:", error);
  }
};

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