React Native中Image组件加载URI图片显示空白问题求助

核心问题：未设置Image组件的宽高样式 #

你的代码里已经定义了userprofileimg样式，但没有将其应用到Image组件上。React Native的Image组件默认宽高为0，不指定宽高的话，即使图片加载成功也会显示空白。

修改后的代码： #

import { View, Image, Text, StyleSheet } from 'react-native'
import React from 'react'
import { useUser } from '@clerk/clerk-react'

export default function Header() {
    const { user, isLoading } = useUser();
    console.log(user?.imageUrl);

    return user && (
        <View>
            <View>
                <Text>Homescreen Header</Text>
                <Image 
                    source={{ uri: user?.imageUrl }}
                    style={styles.userprofileimg} // 添加上样式
                    onError={(error) => console.error('Image loading error:', error)}
                />
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    userprofileimg: {
        width: 45,
        height: 45,
        borderRadius: 22.5 // 可选：需要圆形头像时添加
    }
})

其他排查方向 #

如果添加样式后仍然空白，可检查以下几点：

• 确认图片URI协议：确保使用https协议，部分React Native环境会默认阻止http协议的资源加载。
• 网络权限配置：
  • Android：在AndroidManifest.xml中确认添加了<uses-permission android:name="android.permission.INTERNET" />
  • iOS：若加载http图片，需在Info.plist中配置NSAppTransportSecurity允许非HTTPS请求
• CORS限制：若图片所在服务器有CORS限制，可能导致加载失败，但你的onError未触发，这种可能性较低。

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