正在加载用户的个人资料图像

Question

我正在使用React，Redux和Firebase构建网站。我使用Firebase存储存储用户的个人资料图片，并希望在用户创建帐户后将其显示在网站上。我的方法以前是在每个需要显示个人资料图像的组件中包含以下图像元素：

//1st Approach
render(){

        const { auth } = this.props;

        return(
                       .......

                        <img src={firebase.storage().ref(`images/`+auth.uid).getDownloadURL()}></img>

                       ......

但是，这样做仅显示默认的图像图标（绿色的山峰和天蓝色背景的白云），控制台报告“ 404”错误，表明对象“图像/未定义”不存在。可能发生错误是因为在将身份验证从Redux状态传递到组件之前调用了getDownloadUrl方法。我尝试的另一种方法是在组件状态下添加“ profileimage”字段，并将该字段值设置为componentDidMount内部的图像URL：

//2nd Approach
        componentDidMount() {

           const { auth } = this.props;
           const id = auth.uid;
           const image = firebase.storage().ref(`images/`+id);
           image.getDownloadURL().then((url) => this.setState({ profileimage: url }));
        }

        ......

         <img src={this.state.profileimage}></img>

第二种方法成功显示了图像。但是，由于componentDidMount在组件的生命周期内仅被调用一次，因此，如果用户刷新页面，则“ profileimage”将被设置为“ undefined”。所以我想知道如何以最合适的方式实现该功能。谢谢！

Answer 1

auth.uid是您从firebase sdk获得的那个吗？

也许您可以尝试使用以下方法获取uid：

componentDidMount() {
  firebase.auth().onAuthStateChanged((user) => {
    const image = firebase.storage().ref(`images/${user.uid}`);
    image.getDownloadURL().then((url) => this.setState({ profileimage: url }));
  });
}