React Native本地图片转Base64：如何获取正确的图片路径？

本地资源在React Native打包后不会保留开发时的相对路径，直接用src/assets/images/myImage.png这类路径无法读取，以下是两种可行的解决方案：

方法1：借助react-native-fs库读取（推荐） #

1. 先安装依赖：

npm install react-native-fs --save
# 或使用yarn
yarn add react-native-fs

2. 编写转换代码：

import RNFS from 'react-native-fs';
import { Image, Platform } from 'react-native';
// 先导入你的图片资源
import myImage from './src/assets/images/myImage.png';

const convertImageToBase64 = async () => {
  try {
    // 获取资源的打包后信息
    const assetSource = Image.resolveAssetSource(myImage);
    let filePath;

    // 处理不同平台的路径格式
    if (assetSource.uri.startsWith('file://')) {
      filePath = assetSource.uri.replace('file://', '');
    } else if (Platform.OS === 'android') {
      // Android资源需映射到RNFS可访问的资源目录
      filePath = `${RNFS.ResourceDirectoryPath}/${assetSource.uri.split('/').pop()}`;
    } else {
      filePath = assetSource.uri;
    }

    // 读取文件并转为Base64
    const base64Str = await RNFS.readFile(filePath, 'base64');
    console.log('转换后的Base64:', base64Str);
    return base64Str;
  } catch (err) {
    console.error('转换失败:', err);
  }
};

方法2：无第三方依赖，用AssetRegistry+fetch #

通过React Native内置的AssetRegistry获取资源URI，再用fetch获取Blob后转Base64：

import { AssetRegistry, Image } from 'react-native';
import myImage from './src/assets/images/myImage.png';

const convertToBase64 = async () => {
  try {
    // 获取资源ID并解析URI
    const asset = AssetRegistry.getAssetByModuleId(myImage);
    const resourceUri = Image.resolveAssetSource(asset).uri;

    // 拉取资源Blob
    const response = await fetch(resourceUri);
    const blob = await response.blob();

    // 将Blob转为Base64
    const base64Str = await new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result.split(',')[1]); // 去掉data:image/png;base64,前缀
      reader.onerror = reject;
      reader.readAsDataURL(blob);
    });

    console.log('转换后的Base64:', base64Str);
    return base64Str;
  } catch (err) {
    console.error('转换出错:', err);
  }
};

关键注意事项 #

• 确保metro.config.js中配置了正确的资源扩展名，避免资源被打包忽略：

  const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
  
  module.exports = mergeConfig(getDefaultConfig(__dirname), {
    resolver: {
      assetExts: ['png', 'jpg', 'jpeg', 'gif'], // 包含你的图片格式
    },
  });
  

• 绝对不要直接使用开发时的相对路径（如src/assets/images/myImage.png）访问资源，React Native打包后资源路径会被重新处理。

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