React Native iOS端Base64编码图片无法显示问题排查

我开发了一个React Native应用，需要在商品存在图片时展示对应图片。将Base64编码的图片以Blob形式存储在本地SQLite数据库，通过以下代码渲染：

<Image source={{uri: "data:image/png;base64," + imgsource}} style={{height: 150, width: null, flex: 1}}/>

其中imgsource是从数据库获取的Base64字符串，图片及其他信息直接存入对象数组。使用React Native 0.61.5版本，Android端显示正常，但iOS端图片无法显示，请问是否遗漏了配置？

以下是Podfile内容：

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
project 'sgeapp.xcodeproj'
target 'sgeapp' do
  # Pods for sgeapp
  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/'
  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'


#  pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
  pod 'react-native-sqlite-storage', :path => '../node_modules/react-native-sqlite-storage'
  target 'sgeappTests' do
    inherit! :search_paths
    # Pods for testing
  end

  post_install do |installer|
      ## Fix for XCode 12.5 beta
      find_and_replace("../node_modules/react-native/React/CxxBridge/RCTCxxBridge.mm", "_initializeModules:(NSArray<id<RCTBridgeModule>> *)modules", "_initializeModules:(NSArray<Class> *)modules")
          find_and_replace("../node_modules/react-native/ReactCommon/turbomodule/core/platform/ios/RCTTurboModuleManager.mm", "RCTBridgeModuleNameForClass(strongModule))", "RCTBridgeModuleNameForClass(Class(strongModule)))")
  end
  
  use_native_modules!
end

def find_and_replace(dir, findstr, replacestr)
  Dir[dir].each do |name|
      text = File.read(name)
      replace = text.gsub(findstr,replacestr)
      if text != replace
          puts "Fix: " + name
          File.open(name, "w") { |file| file.puts replace }
          STDOUT.flush
      end
  end
  Dir[dir + '*/'].each(&method(:find_and_replace))
end

• 检查Base64字符串格式：iOS对data URI格式要求更严格，确认imgsource是纯Base64编码内容，没有多余的空格、换行符或重复的data:image/png;base64,前缀（代码里已经拼接了这个前缀，数据库里的字符串不能再带）。可以打印拼接后的完整URI，复制到浏览器地址栏测试是否能正常显示图片，排除Base64本身的问题。
• 修正Blob转Base64的逻辑：从SQLite读取Blob时，确保转换为Base64的方式正确。如果用react-native-sqlite-storage，要确认读取BLOB类型字段时，正确处理二进制数据转Base64，不要直接返回原始二进制字符串。
• 验证Image组件的URI拼接：检查拼接后的URI语法是否正确，比如"data:image/png;base64," + imgsource有没有漏写分号、逗号，或者拼写错误。
• 清理iOS构建缓存：RN 0.61.5的iOS端容易出现缓存问题，执行以下操作：
  • 删除iOS目录下的Pods文件夹和Podfile.lock，重新运行pod install
  • 在Xcode中按Command+Shift+K清理Build文件夹
  • 删除模拟器或真机上的应用，重新编译运行
• 尝试替换渲染方式：如果上述方法无效，可以把Base64字符串写入本地文件再加载。比如用react-native-fs将Base64保存为本地图片文件，然后用文件路径作为Image组件的source，这种方式在iOS上兼容性更好。

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