React Native无法加载localhost本地开发服务器图片如何解决？

• 字符串模板语法错误：你当前代码拼接URI时用了双引号包裹，JS的模板字符串必须用反引号`才能解析${logo}变量，修改后代码如下：

<Image
  source={{
    uri: `http://localhost:4001/${logo}`, // 替换双引号为反引号
  }}
  style={styles.image}
/>

修改后可先打印拼接完成的URI，确认和Chrome中可正常访问的地址完全一致。

• 本地地址指向错误：localhost指向的是运行React Native应用的设备（模拟器/真机）自身，而非你启动图片服务的开发电脑。需要将URI中的localhost替换为开发电脑的局域网IP，比如你的电脑IP为192.168.3.25，则修改为：

uri: `http://192.168.3.25:4001/${logo}`

注意要保证开发电脑和测试设备处于同一WiFi网络下。

• HTTP明文请求被系统限制：

  • iOS端：系统默认禁止HTTP请求，需要在Xcode项目的Info.plist中添加NSAppTransportSecurity配置，允许明文请求，可直接添加以下配置：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

  • Android端：API 28及以上默认禁止HTTP请求，需要在AndroidManifest.xml的application节点添加属性：

  <application
    android:usesCleartextTraffic="true"
    ... 其他配置
  >
  

• 其他排查项：确认Image组件已明确指定宽高，你的代码中wrapper和image的宽高配置是生效的，可排除该问题。

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