加载用户的个人资料图片

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”将被设置为空字符串。所以我想知道如何以最合适的方式实现该功能。谢谢！

Answer 1

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

您可以使用“onAuthStateChanged”观察者获取 uid：

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

这样，您可以确保用户已初始化。