如何显示Firebase Storage中的图片?

时间:2018-12-11 11:25:24

标签: reactjs firebase react-native native firebase-storage

我无法显示图片。当我console.log用户图片数组时,我得到: //输出:https://firebasestorage.googleapis.com/v0/b/expoapppicture.appspot.com/o/siICL8Md8Ld7TcqZOItUdYWJlTq2%2F7078562088082493?alt=media&token=87a1f253-157f-4e6b-9334-4aac5be07462

export default class PostOverview extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userPicture: []
    };
  }

  async getPicturesFromUser() {
    const pictureRefs = [];
    var uid = firebase.auth().currentUser.uid;
    var db = firebase.firestore();
    await db
      .collection("pictures")
      .where("uid", "==", uid)
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          var data = doc.data();
          pictureRefs.push(JSON.stringify(data.pictureUrl));
        });
        this.setState({ userPicture: pictureRefs });
      })
      .catch(error => {
        console.log(error);
      });
    return pictureRefs;
  }

  async componentWillMount() {
    await this.getPicturesFromUser();
    console.log(this.state.userPicture[0]);
  }

  render() {
    console.log(this.state.userPicture[0]);
    if (this.state.userPicture.length < 0) {
      <View>
        <Text>Loasding</Text>
      </View>;
    } else {
      return (
        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
         <Text>{this.state.userPicture[0]}</Text>
         <Image source={{uri: this.state.userPicture[0]}} style={{ height: 200}} />
        </View>
      );
    }
  }
}

0 个答案:

没有答案