React Native调用OpenWeather API加载图片失败求助

1. alt文本不生效的问题 #

React Native 的Image组件没有alt属性，Web端的alt对应RN里的accessibilityLabel，且需要配合accessible={true}才能生效。修改代码如下：

<Image
  source={{uri: src}}
  accessible={true}
  accessibilityLabel="天气图标"
  // 其他属性保留
/>

2. 图片加载卡住（onLoadStart触发但onLoadEnd不执行）的原因及解决 #

（1）检查图片URL正确性 #

OpenWeather API 返回的图标代码需要拼接成官方完整URL，正确格式示例：

// iconCode 为API返回的图标标识，比如"01d"
const src = `https://openweathermap.org/img/wn/${iconCode}@2x.png`;

确认你的src变量是否符合该格式，是否漏写协议（如https://）或存在拼写错误。

（2）平台网络配置问题 #

• iOS端：若使用HTTP协议的URL，iOS默认阻止非HTTPS请求，需在Info.plist中添加配置（建议优先用HTTPS避免此操作）：

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

• Android端：确保AndroidManifest.xml已添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

  若用HTTP URL，Android 9及以上需在application标签中追加：

  android:usesCleartextTraffic="true"
  

（3）捕获加载错误定位问题 #

添加onError回调打印错误详情，快速排查问题：

<Image
  source={{uri: src}}
  onError={(error) => console.log('图片加载错误:', error.nativeEvent)}
  // 其他属性保留
/>

3. 宽高设置优化 #

RN的Image组件优先读取style中的宽高配置，建议统一保留style里的设置，避免同时设置属性与style造成冲突。

内容的提问来源于stack exchange，提问作者Chaitanya Rajendra Khiratkar