React Native 通过URI加载图片不显示，仅朋友电脑上可正常展示

1. 运行环境适配校验 #

你使用的10.0.2.2是安卓模拟器专属的宿主机回环映射地址，仅在安卓模拟器环境下可以正常访问，以下环境均无法识别该地址：

• iOS模拟器
• 安卓/ iOS 真机设备
  你朋友的设备可正常加载，大概率是刚好运行在安卓模拟器环境下。如果需要跨设备测试，建议替换为宿主机的局域网IP地址。

2. 明文请求权限校验 #

当前安卓9及以上、iOS所有正式版本默认禁止未加密的HTTP请求，你使用的是HTTP协议地址，需要单独配置网络安全规则放行：

• 安卓端：在android/app/src/main/res/xml目录下新建network_security_config.xml，配置10.0.2.2的明文访问许可，再在AndroidManifest.xml的application标签中添加android:networkSecurityConfig="@xml/network_security_config"属性引用配置。
• iOS端：在项目Info.plist的NSAppTransportSecurity配置项中，添加对应域名的HTTP访问例外规则。

3. 后端服务绑定校验 #

如果你的8000端口图片服务仅绑定了127.0.0.1，则只有宿主机本身可以访问该服务，模拟器/真机都无法连接。需要将后端服务的监听地址修改为0.0.0.0，确保同局域网下的设备可以正常访问服务。

4. 资源路径与报错校验 #

你当前已经添加了onError回调，可以先打印回调返回的完整错误信息，确认错误类型：

• 如果是连接超时：优先排查上述网络、地址配置问题
• 如果是404错误：打印拼接完成的完整URI，复制到宿主机浏览器直接访问，确认路径拼接是否正确、后端是否存在对应资源
  对应代码参考：

<Image
   style={styles.image}
   source={{uri: 'http://10.0.2.2:8000/images/illustrations/' + illustration}}
   onError={(error) => console.error('图片加载错误：', error.nativeEvent)}
/>

5. 组件样式校验 #

确认styles.image已经设置了明确的width和height属性，React Native的Image组件未指定宽高时，默认不会渲染内容，即使资源加载成功也无法显示。

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