React Native图片无法显示问题排查求助

• 父容器高度异常导致百分比尺寸失效
  你给imageProduct设置的width: "50%", height: "50%"依赖父容器的尺寸，但父容器的height: "25%"是基于ScrollView内的自适应容器，ScrollView本身没有固定高度，导致父容器高度计算异常，图片的百分比宽高无法生效。
  解决方法：

  • 用useWindowDimensions获取屏幕高度，给父容器设置明确的高度值：

    const { height } = useWindowDimensions();
    // 替换父容器的内联样式
    style={{
      alignItems: "center",
      backgroundColor: "#fff",
      height: height * 0.25,
    }}
    

  • 临时给图片设置固定宽高（比如width: 200, height: 200），验证图片本身是否能正常加载。

• 网络图片的必要配置
  对于远程图片source={{uri: data["image_url"]}}，需要做以下检查：

  • 确认data["image_url"]是可正常访问的有效URL，没有拼写错误或权限限制
  • 添加resizeMode属性，保证图片能适配容器：

    <Image
      style={styles.imageProduct}
      source={{uri: data["image_url"]}}
      resizeMode="contain"
    />
    

  • Android端需确保AndroidManifest.xml中配置了网络权限：

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

• 本地图片路径验证
  检查本地图片require("../../assets/images/cloche.png")的路径：

  • 确认文件确实存在于项目的../../assets/images/目录下（根据当前组件的目录层级判断）
  • 路径大小写是否匹配（区分大小写的系统如Linux/macOS会影响加载）

• 样式冲突排查
  检查是否有父容器的overflow: hidden、position属性等，或者其他样式规则覆盖了图片的宽高设置，导致图片被隐藏或压缩。

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