Question

我有这样的代码 - 我将我的图像保存到正在获取并打印正确URL的状态

fetchData = async () => {
this.setState({profilePicUrl: await 
AsyncStorage.getItem('profileImg')});
//here it is printing the right URL
console.log('this.state.profilePicUrl '+this.state.profilePicUrl);
console.log('this.props.profile '+this.props.profile); 
};

但是，在同一组件的render方法中

<Thumbnail source={{uri: this.state.profilePicUrl}} style={{ height: 100, width: null, flex: 1 }} />

这个缩略图什么也没显示，在EXPO XDE中我看到source.uri是一个空字符串

我已经像这样

在render方法中记录了profilePicUrl

render() {
console.log('In Render method of Profile');
console.log('In Render method of Profile this.state.profilePicUrl

'+ this.state.profilePicUrl）;

并且能够在控制台中获取网址。但是，我看到了这个错误

缩略图

中

source.uri不应为空字符串

此问题类似于此问题，因为我还使用Firebase存储和检索图像

Setting image source to Firebase Storage URL with React Native

Answer 1

您需要设置缩略图的高度和宽度。

Answer 2

看起来可能是因为您正在异步加载图像，因此在填充uri之前，react正在尝试渲染Thumbnail组件。您可以使用布尔值来跟踪图像是否已被抓取并且懒惰地渲染组件。

以下是LazyImage组件的示例：https://medium.com/@awesomejerry/image-with-react-native-98e7363f6dfe

设置状态不适用于图像源

2 个答案: