Question

我将从Expo ImagePicker / Camera中选择的图像存储到Firebase存储中，并使用getDownloadURL，getDownloadURL检索图像。

使用函数的结果，我将图像的链接存储到我的Firebase Realtime DB中，并通过react-native的Image组件显示这些图像。

我得到的图像链接有点像'https://firebasestorage.googleapis.com/v0/b/my-app.appspot.com/o/image%2FHaroi3o9Krf1wP9j0DzHIqfJ8Sz2%2F-imageName.jpg?alt=media&token=x'。

当我将此网址添加到图片时，没有任何显示。

// FlatList to show data

<FlatList
  data={data}
  refreshing={isRefresh}
  onRefresh={refresh}
  keyExtractor={data => data.id}
  renderItem={data => {
  return (
    <CustomItem imageUrl={data.item.imageUrl} />
  );
  }}
/>

// Image Component (In another file)
// (gave up properly formatting the codes.. anyone knows how? 
// when i copy and paste it, this is the result below.)

const { imageUrl } = props;

const [imageLink, setImageLink] = useState('');

  useEffect(() => {
    setImageLink(imageUrl);
  }, [props]);

console.log('imageUrl', imageUrl);

<View style={styles.imageContainer}>
        {!imageLink.length === 0 ? (
          <Image style={{width: '100%', height: '100%'}} source={{ uri: imageLink}} />
        ) : (
          <Text>No image found!</Text>
        )}
      </View>

我尝试过的工作是将接收到的道具imageUrl存储到具有useEffect且具有依赖项作为道具的状态，然后将Image组件的source / uri设置为该状态。但这没用。

感谢帮助。

无法将图像从Firebase存储加载到Expo Image

0 个答案: