使用Expo ImagePicker多选图片预览失败：public.jpeg加载错误求助

问题描述 #

使用Expo ImagePicker选择多张图片后，无法在Image组件中预览，日志报错：

Error: Failed to read picked image → Caused by: Cannot load representation of type public.jpeg

问题分析 #

1. 数据结构不一致：原代码中单选时存储字符串URI数组，多选时存储包含URI的对象数组，导致FlatList渲染单选场景时item.uri为undefined，触发图片加载失败。
2. iOS权限缺失：未在配置文件中声明相册访问权限，iOS系统限制读取图片资源，引发格式相关报错。

解决方案 #

1. 统一图片数据结构 #

修改图片选择函数，确保无论单选还是多选，都存储统一的对象数组：

const pickImage = async () => {
  let result = await ImagePicker.launchImageLibraryAsync({
    mediaTypes: ImagePicker.MediaTypeOptions.Images,
    allowsMultipleSelection: true,
    aspect: [4, 3],
    quality: 1,
  });

  console.log(result);

  if (!result.cancelled) {
    // 统一处理为包含uri的对象数组
    const selectedImages = result.selected 
      ? result.selected 
      : [{ uri: result.uri, type: result.type, fileName: result.fileName }];
    setImage(selectedImages);
  }
};

2. 配置iOS权限 #

在app.json中添加相册访问权限声明：

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSPhotoLibraryUsageDescription": "需要访问您的相册以选择图片",
        "NSCameraUsageDescription": "需要访问您的相机以拍摄图片"
      }
    }
  }
}

3. 优化FlatList渲染 #

添加resizeMode避免图片拉伸，确保组件正确加载：

<ScrollView>
  <FlatList
    data={image}
    renderItem={({ item }) => (
      <Image 
        source={{ uri: item.uri }}
        style={{ width: 100, height: 100, margin: 5 }}
        resizeMode="cover"
      />
    )}
    keyExtractor={(item) => item.uri}
    numColumns={3}
  />
</ScrollView>

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