React Native中Firebase Storage图片无法显示的原因求助

1. 图片格式兼容性问题 #

• WebP格式（你提到的URL为.webp）：iOS原生不支持WebP格式，若要在iOS上加载，需集成react-native-webp库，或者在Firebase Storage中额外存储JPG/PNG格式的图片作为替代方案。
• SVG格式（你代码中使用的是.svg）：React Native的Image组件无法直接渲染SVG文件，必须借助react-native-svg库的SvgUri组件实现，示例代码：

  import { SvgUri } from 'react-native-svg';
  
  <SvgUri
    uri="https://firebasestorage.googleapis.com/v0/b/desire-app-e9e94.appspot.com/o/profile%2Fdefault_user.svg?alt=media&token=cd6fed4a-86da-4c52-bad7-7f8f0d83fd3a"
    width={200}
    height={200}
  />
  

2. Firebase Storage的CORS规则限制 #

浏览器能访问不代表移动端请求会被允许，需配置Firebase Storage的CORS规则：

1. 创建cors.json文件，内容如下：

   [
     {
       "origin": ["*"],
       "method": ["GET"],
       "maxAgeSeconds": 3600
     }
   ]
   

2. 通过Firebase CLI执行命令上传配置：

   gsutil cors set cors.json gs://desire-app-e9e94.appspot.com
   

3. URL编码解析问题 #

你的URL包含%2F（/的URL编码），React Native的Image组件可能无法正确解析编码后的路径，可尝试解码后使用：

<Image
  source={{
    uri: decodeURI('https://firebasestorage.googleapis.com/v0/b/desire-app-e9e94.appspot.com/o/profile%2Fguest-user.webp?alt=media&token=fe99fdf9-d36a-4548-b295-cc2fdce79f64')
  }}
  style={{width: 200, height: 200}}
/>

4. 应用网络权限缺失 #

确认应用已配置网络访问权限：

• iOS：检查Info.plist中的NSAppTransportSecurity配置，确保允许HTTPS请求（默认已开启，若有特殊限制需调整）。
• Android：在AndroidManifest.xml中确认存在<uses-permission android:name="android.permission.INTERNET" />权限。

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