React Native中FastImage加载图片后转Base64避免重复请求问题

方案1：读取FastImage本地缓存文件转Base64 #

FastImage依赖的底层缓存库（iOS的SDWebImage、Android的Glide）会把加载后的图片缓存到本地，你可以通过匹配缓存键找到对应文件，再读取转成Base64，完全不需要重复请求服务器。

步骤说明：

• 生成和FastImage一致的缓存键：默认用图片URL的MD5值作为缓存标识
• 根据平台定位缓存文件路径
• 检查文件存在后读取并转Base64

示例代码：

import RNFS from 'react-native-fs';
import md5 from 'md5';
import { Platform } from 'react-native';

// 生成缓存键（和FastImage缓存逻辑对齐）
const getCacheKey = (imageUrl) => md5(imageUrl);

// 获取缓存文件的本地路径
const getCachedImagePath = async (imageUrl) => {
  const cacheKey = getCacheKey(imageUrl);
  let filePath = '';

  if (Platform.OS === 'ios') {
    filePath = `${RNFS.LibraryDirectoryPath}/Caches/com.dylanvann.fastimage/${cacheKey}`;
  } else if (Platform.OS === 'android') {
    // Glide缓存文件名规则：MD5(url) + 后缀，这里适配常见格式
    filePath = `${RNFS.CachesDirectoryPath}/image_manager_disk_cache/${cacheKey}.0`;
  }

  const isExisted = await RNFS.exists(filePath);
  return isExisted ? filePath : null;
};

// 将缓存文件转为Base64
const convertImageToBase64 = async (imageUrl) => {
  const filePath = await getCachedImagePath(imageUrl);
  if (!filePath) return null;

  const base64Str = await RNFS.readFile(filePath, 'base64');
  // 根据图片实际类型调整前缀（比如png、webp）
  return `data:image/jpeg;base64,${base64Str}`;
};

// 在FastImage加载完成后触发转换
<FastImage
  source={{
    uri: imageUrl,
    priority: FastImage.priority.normal,
  }}
  onLoad={() => {
    convertImageToBase64(imageUrl).then(base64 => {
      // 拿到Base64后做后续处理
      console.log('转换后的Base64:', base64);
    });
  }}
/>

方案2：通过原生模块直接读取缓存数据 #

如果觉得文件路径适配麻烦，可以写简单的原生模块，直接调用SDWebImage/Glide的API从缓存中获取图片二进制数据，再转成Base64返回给RN层：

• iOS：调用SDImageCache.shared.imageCache.queryImage(forKey: cacheKey)获取图片，再转Base64
• Android：调用Glide.with(context).asFile().load(url).submit()获取缓存文件，再读取转Base64

注意事项 #

• 必须在onLoad回调后执行转换，确保图片已经完成缓存
• 动态URL（带签名、时间戳）需要调整缓存键生成逻辑，保证和FastImage的缓存规则一致
• 不同版本的FastImage/底层缓存库可能修改缓存路径，需要测试适配

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