React Native中存储在State的图片无法显示问题求助

核心问题 #

你用JSON.stringify(url)处理了Firebase返回的URL，导致最终的ImageUrl是带双引号的字符串（比如"https://xxx.firebase.com/image.jpg"），而React Native的Image组件要求uri是不带引号的纯URL字符串，所以图片无法加载。

另外第二种写法里，setImageUrl({uri:setImageUrl(JSON.stringify(url))})是错误的——状态更新函数setImageUrl不能嵌套调用，而且这样会把状态值搞成混乱的结构。

正确写法 #

直接将Firebase返回的原始url赋值给状态，不需要额外序列化：

// 获取到url后直接赋值，不要用JSON.stringify
setImageUrl(url)

// Image组件正常使用
<Image style={styles.img} source={{uri: ImageUrl}} />

验证方式 #

可以在控制台打印typeof ImageUrl，确认它是string类型，且值是不带引号的完整URL（比如https://xxx.firebase.com/image.jpg），而不是带引号的字符串。

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