React Native中Card组件仅图片无法渲染 其余数据库数据可正常展示

故障根因 #

• Image组件传参不符合规范：当前给Image组件传入的属性完全不符合组件要求。不管是React Native原生Image还是绝大多数第三方图片组件，都要求图片地址必须通过source属性接收，格式为包含uri字段的对象。现在直接把uri、tint、preview作为根属性传递，组件根本识别不到图片资源，自然无法渲染。代码里注释的source={image}写法也不规范，缺少uri字段的对象格式，组件同样读不到有效地址。
• 图片URL指代逻辑错误：接口返回的图片地址是http://127.0.0.1:8000/xxx，这个地址在移动端的指代和电脑端完全不同：真机上127.0.0.1指向手机自身，根本不是运行后端服务的电脑，无法请求到对应资源；哪怕是Android模拟器，127.0.0.1也是模拟器自身的内部回环地址，访问不到电脑上的后端服务。
• 系统级明文请求拦截：Android 9.0+、iOS 10+系统默认拦截所有未加密的HTTP明文请求，当前的图片地址是HTTP协议开头，会被系统安全策略直接阻断，根本发不出加载图片的网络请求。

分步修复操作 #

1. 修正Image组件传参格式
   如果使用React Native原生Image组件，直接替换为标准写法：

   <Image
     style={styles.image}
     source={{ uri: imageUrl }}
     resizeMode="cover"
   />
   

   如果使用的是带预览功能的第三方Image组件，要对照对应组件的官方文档传参，不要自行添加未定义的属性，避免组件无法识别传入的图片地址。
2. 修正接口返回的图片可访问地址
   开发阶段不要让后端返回带127.0.0.1的图片地址，直接获取运行后端服务的电脑的局域网IP，替换地址中的回环地址：比如原地址http://127.0.0.1:8000/media/posts/n3.jpg，改成http://你的电脑局域网IP:8000/media/posts/n3.jpg，保证测试用的手机/模拟器和电脑连接在同一个局域网下。
   不同模拟器的特殊适配注意：
   • Android模拟器访问宿主机服务，需要将IP替换为10.0.2.2
   • iOS模拟器可以直接使用Mac的局域网IP访问本机服务
3. 放开开发阶段的HTTP访问权限
   • Android端：在android/app/src/main/AndroidManifest.xml的<application>标签中添加android:usesCleartextTraffic="true"，允许加载HTTP内容
   • iOS端：在Info.plist中添加App Transport Security例外配置，放开开发环境下的HTTP访问限制（正式上线前必须将所有资源替换为HTTPS地址）

快速排查技巧 #

加载前可以先做简单验证：把实际用来加载的图片地址，直接复制到手机自带的浏览器中打开。

• 如果浏览器能正常显示图片，说明地址、网络、权限都没有问题，故障点就是Image组件的传参写法
• 如果浏览器都打不开图片，优先排查网络连通性、地址配置、系统权限问题

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