React Native Image组件无法加载API图片问题求助

问题场景 #

在React Native应用中使用Image组件加载API返回的图片时，URL日志显示正确，但图片无法渲染。添加onError回调后捕获到错误：

Image load error: {"error": "Failed to connect to sport.ddev.site/127.0.0.1:80"}

本地图片可正常显示，API本身工作正常。

相关代码片段 #

原始组件代码：

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image } from 'react-native';

const Product = (props) => {
  console.log('Product Image URL:', props.productImage);

  return (
    <TouchableOpacity activeOpacity={0.5}>
      <View style={styles.productContainer}>
        <Image
          source={{ uri: props.productImage }}
          style={styles.productImage}
        />
        <Text style={styles.productTitle}>{props.title}</Text>
        <Text style={styles.productPrice}>€ {props.price}</Text>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  productContainer: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 10,
    margin: 6,
    alignItems: 'center',
  },
  productImage: {
    width: 150,
    height: 150,
  },
  productTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    marginTop: 5,
    width: 155,
    height: 90,
    textAlign: 'center',
  },
  productPrice: {
    fontSize: 14,
    color: '#888',
  },
});

添加onError后的代码：

const Product = (props) => {
  console.log('Product Image URL:', props.productImage);

  return (
    <TouchableOpacity activeOpacity={0.5}>
      <View style={styles.productContainer}>
        <Image
          style={styles.productImage}
          source={{ uri: props.productImage }}
          onError={(error) => console.error('Image load error:', error.nativeEvent)}
        />
        <Text style={styles.productTitle}>{props.title}</Text>
        <Text style={styles.productPrice}>€ {props.price}</Text>
      </View>
    </TouchableOpacity>
  );
};

排查与解决建议 #

1. 修正网络地址（真机/模拟器通用） #

127.0.0.1是设备本地回环地址，真机无法访问电脑上的DDEV服务：

• 替换URL中的127.0.0.1为电脑的局域网IP地址（如192.168.1.100）
• 确保手机和电脑连接同一WiFi网络，测试浏览器中输入http://<电脑IP>:80能否打开图片

2. 配置DDEV允许外部访问 #

DDEV默认仅绑定localhost，需要修改配置让它监听所有网络接口：

• 编辑项目根目录下的.ddev/config.yaml，添加：

  bind_all_interfaces: true
  

• 重启DDEV服务：

  ddev restart
  

3. 配置React Native网络安全策略 #

如果使用HTTP协议加载图片，需绕过平台的安全限制：

Android

在android/app/src/main/AndroidManifest.xml的<application>标签中添加：

android:usesCleartextTraffic="true"

iOS

在ios/[你的项目名]/Info.plist中添加NSAppTransportSecurity例外：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>sport.ddev.site</key>
    <dict>
      <key>NSIncludesSubdomains</key>
      <true/>
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
    </dict>
  </dict>
</dict>

4. 验证URL的可访问性 #

• 在设备浏览器中直接输入图片URL，确认能否加载。如果无法加载，问题出在网络或服务端配置，与React Native无关
• 检查URL是否存在重定向，必要时在API中直接返回最终的图片资源地址

5. 清除缓存并重启应用 #

• 清除React Native缓存：

  npx react-native start --reset-cache
  

• 重启模拟器/真机上的应用，确保所有配置修改生效

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