Question

我正在尝试从Firebase存储中检索图像网址，然后使用该网址设置图像。但是，似乎我使用当前代码将src设置为未定义的值：

这是我用来从Firebase存储中检索的功能

import {Firebase, 
        FirebaseAuth, 
        FirebaseDatabase, 
        FirebaseStorage} from '../Initialize'

export function getProfilePictureUrl(uid, callback, onErrorCallback) {
    var pathReference = FirebaseStorage.ref('profiles/' + uid + '/profilePicture.jpeg');

    pathReference.getDownloadURL().then((url) => {
        callback(url);
    }).catch((error) => {
        onErrorCallback(error);
    });
}

我从一个使用如下函数的React组件中调用它：

render() {
    let profilePictureUrl = getProfilePictureUrl(uid, (url) => {
        console.log(url); // The console.log(url) returns a valid and working url for the image. So I know my imports are correct
        return url;
    },
    (error) => {
        console.log(error.code);
        return "";
    })
    return (
        <img
            src={profilePictureUrl}
        />
    );
}

由于ProfilePictureUrl返回undefined，因此未正确加载图像。

我也尝试在render（）中创建一个测试器，如下所示：

render() {
     if(profilePictureUrl !== undefined) {
          console.log("defined");
     }
     else {
         console.log("undefined");
     }
     // returns 'undefined'
}

我正在记录else响应，表明该函数返回了一个未定义的值。我怀疑它与Firebase的异步性质有关，但我不确定如何解决它。

此问题可能与：React-Native: Download Image from Firebase Storage

有关

Answer 1

通过谷歌发现这个，并决定回答以防其他人也发现它。

您的示例无效，因为React在promise解析时不会更新组件。这意味着您的图片网址仍为undefined。

要解决此问题，您可以在承诺中调用this.setState()（如果使用flux / redux，则调度操作）。这将使用新URL自动更新您的状态。

代码示例

const config = {
  apiKey: "apiKey",
  authDomain: "authDomain",
  storageBucket: "bucketURL"
}

firebase.initializeApp(config)
const storage = firebase.storage().ref()

class HelloMessage extends React.Component {
  constructor () {
    super()
    this.state = {
      lithuania: '',
      uk: ''
    }

    this.getImage('lithuania')
    this.getImage('uk')
  }

  getImage (image) {
    storage.child(`${image}.png`).getDownloadURL().then((url) => {
      this.state[image] = url
      this.setState(this.state)
    })
  }

  render() {
    return (
      <div>
        Hello Lithuania<br />
        <img src={ this.state.lithuania } alt="Lithuanian flag" />
        <br />
        Hello United Kingdom<br />
        <img src={ this.state.uk } alt="UK flag" />
      </div>
    );
  }
}

完整的代码： https://codepen.io/DeividasK/pen/pRmbWq

从Firebase存储中加载图片以反映

1 个答案: