I have a list of contacts and each of those has a profile photo which is stored in Firebase storage. An official way of getting the images would be to fetch the URL using the Firebase storage SDK and set it as src in img element.

            firebaseApp.storage().ref("profilePhotos/" + officeId + ".jpg").getDownloadURL().then(function (url) {
                this.photoUrl = url;
            }.bind(this)).catch(function (error) {
                console.log("Photo error"); // TODO: handler
            });

This is quite cumbersome when I have to load multiple files (as in contact list). Is the file URL received above static? Can I store it in the database in the profile information and use it directly?

Thanks

I have a list of contacts and each of those has a profile photo which is stored in Firebase storage. An official way of getting the images would be to fetch the URL using the Firebase storage SDK and set it as src in img element.

            firebaseApp.storage().ref("profilePhotos/" + officeId + ".jpg").getDownloadURL().then(function (url) {
                this.photoUrl = url;
            }.bind(this)).catch(function (error) {
                console.log("Photo error"); // TODO: handler
            });

This is quite cumbersome when I have to load multiple files (as in contact list). Is the file URL received above static? Can I store it in the database in the profile information and use it directly?

Thanks

• javascript
• firebase
• firebase-realtime-database
• firebase-storage

2 Answers 2

A very mon pattern is to store the download URL of a file in Realtime Database for easy use later on. Download URLs should work until you choose to revoke them.

In my experience, the download urls are static. Also if you look at the entry in the database below the download url you can see an option to recreate the download url.

Storing the download url in the Realtime Database is a great way to keep track of those download urls. I would use the push method to hold it in a folder in the database.

The way they use .push in the Realtime Database docs example will create a pattern of storage and retrieval that should solve your problem.

.push for making and entry, chained with .key for retrieval later:

var newPostKey = firebase.database().ref().child('posts').push().key;

.once for reading the data at the reference you want with a .then

firebase.database().ref('/users/' + userId).once('value').then(...)