如何在Expo中从FileSystem加载图片？base64方案失效求替代方法

嘿，你完全没必要绕base64的弯路！Expo的Image组件原生就支持直接使用file://格式的本地文件URI，这不仅是最高效的方式，还能彻底避开base64字符串过大导致加载失败的问题。

1. 直接用本地URI加载（首选方案） #

你只需要把你的fileUri直接传给Image组件的source属性就行，根本不需要任何转换。代码示例：

import { Image, View } from 'react-native';

export default function App() {
  // 你的本地文件URI
  const fileUri = 'file:///Users/username/Library/Developer/CoreSimulator/Devices/B9799180-7428-41D8-A4BC-C3A34BF93043/data/Containers/Data/Application/3D502086-E077-42D5-9B56-A1DB78894261/Documents/ExponentExperienceData/%2540username3%252FProject/image.jpg';

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Image
        source={{ uri: fileUri }}
        style={{ width: 300, height: 300, resizeMode: 'contain' }}
      />
    </View>
  );
}

这个方法直接读取本地文件，性能比转base64好太多，也不会有字符串体积超限的问题。

2. 大图片优化：压缩后再加载 #

如果你的图片分辨率极高（比如几MB甚至几十MB），直接加载可能会出现卡顿或内存占用过高的情况，这时候可以用Expo的ImageManipulator工具来压缩图片，生成一个轻量化的版本后再加载：

首先安装依赖（如果还没装）：

npx expo install expo-image-manipulator

然后用压缩功能处理图片：

import { Image, View, Button } from 'react-native';
import { manipulateAsync, SaveFormat } from 'expo-image-manipulator';
import { useState } from 'react';

export default function App() {
  const originalFileUri = 'file:///Users/username/Library/Developer/CoreSimulator/Devices/B9799180-7428-41D8-A4BC-C3A34BF93043/data/Containers/Data/Application/3D502086-E077-42D5-9B56-A1DB78894261/Documents/ExponentExperienceData/%2540username3%252FProject/image.jpg';
  const [compressedUri, setCompressedUri] = useState(null);

  const handleCompressImage = async () => {
    // 压缩逻辑：调整宽度到800px，压缩质量70%
    const compressedResult = await manipulateAsync(
      originalFileUri,
      [{ resize: { width: 800 } }], // 按比例缩小宽度，高度自动适配
      { compress: 0.7, format: SaveFormat.JPEG }
    );
    setCompressedUri(compressedResult.uri);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="压缩并加载图片" onPress={handleCompressImage} />
      {compressedUri && (
        <Image
          source={{ uri: compressedUri }}
          style={{ width: 300, height: 300, resizeMode: 'contain', marginTop: 20 }}
        />
      )}
    </View>
  );
}

压缩后的图片依然是本地文件URI，直接用Image组件加载就好，既解决了大图片的性能问题，又不用碰base64。

3. 排查加载失败的小技巧 #

如果直接加载URI还是失败，可以先验证文件是否存在：

import * as FileSystem from 'expo-file-system';

// 检查文件状态的函数
const checkFileStatus = async (fileUri) => {
  const fileInfo = await FileSystem.getInfoAsync(fileUri);
  console.log('文件是否存在:', fileInfo.exists);
  console.log('文件大小（字节）:', fileInfo.size);
};

// 在组件里调用
checkFileStatus(yourFileUri);

另外，iOS真机上要确保你有访问对应目录的权限（Expo的FileSystem默认有权限访问应用自身的Documents目录，所以你的路径应该是没问题的）。

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