Retrieve file from firebase storage

Question

I bet it's something very trivial, but even the docs arent clear about this. I don't have to mention that writing anything about firebase in google search returns topics that are related not with JS/WEB but with android in most cases...

The case is that I have a storage folder images that holds... images. I would like to retrieve it when entering my site. My try:

componentDidMount() {
  const images = firebase.storage().ref().child('companyImages');
  const image = images.child('image1');        <----------------    // file name is image1
  image.on('value', (snap) => this.setState({ img: snap.val() }));
}

However it doesnt work as I suppose it to do. As u can see I would like to store this image in state and then display in some part of my site.

Looking forward for any hints etc. Thank u :)

Answer 1

There is no method on() in the Firebase Storage SDK for the Web. You're probably confusing it with the on("value" method in the Firebase Database SDK.

To download data from Cloud Storage in your Firebase web app, you get the download URL for the file and then use that (typically in your HTML) to get the data.

componentDidMount() {
  const images = firebase.storage().ref().child('companyImages');
  const image = images.child('image1');
  image.getDownloadURL().then((url) => { this.setState({ img: url }));
}