Retrieve Stored Image from Firebase Storage

How can i retrieve this image stored in firebase storage?

In short, how can I make a reference to Firebase Storage to fetch the image?

In order to be able to get an image from Firebase Storage, you need to know its path. If you need to get that path directly from the Firebase Console, you should click on an image, and on the right-hand side will see a section named File location. Inside this section, under the Access token, you'll see the actual access token of the image. Simply clicking on the token, will copy the entire download URL in the clipboard. Paste it in your project and that's it.

If you need it programmatically, please check my answer from the following post:

• How to get the download url from Firebase Storage?

Retrieve image stored in Firebase storage

Access tokens for Firebase Storage download URLs don't expire. If a token becomes invalid, it's because you revoked it (from the Firebase console) - in which case I assume you actually want the user to lose access to that image.

Saving download URLs is the idiomatic way to solve this use-case, where users need public access.

---

In your second approach you could consider download the data through the SDK, instead of through a download URL. That would lead to a single request per image.

---

Also see:

• Firebase Storage getDownloadUrl's token validity
• Do download URLs of Firebase Storage objects live forever?

How to SIMPLY retrieve images from firebase storage and display them, using react?

You can use the getDownloadURL method and then use those URLs in <img> tag.

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL()
.then((url) => {
  // Insert url into an <img> tag to "download"
})

Check out the documentation for a full example. Make sure your security rules allow reading the files.

"All I want, is to display a few images that are known in advance"

If the images are not changing frequently then I'd just upload them and get an URL from the console and paste them in the code rather than make API calls to Firebase Storage. You can get URL in the Firebase console from here:

Right click on the file name and click Copy link address. That URL will not expire unless you revoke the token.

Display (and NOT download) image from firebase storage

This is likely due to the file type application/octet-stream instead of image/png. application/octet-stream is the default value when you upload to Firebase Storage.

How to change to image/png

First, create a metadata object (or add to existing metadata) that has the field contentType

const metadata = {
  contentType: 'image/png',
};

Then, upload the file as you would normally, including the metadata as the 3rd argument.

const uploadTask = uploadBytes(storageRef, file, metadata);

You can then use the download URL normally, showing the image instead of downloading it.

Example in Firebase Docs of uploading with metadata

Example in Firebase Docs of adding metadata later

Note: If you use other file formats for images, you can use these MIME types for other image and file formats.

Retrieving image from Firebase Storage

I found the following solution (as suggested in the comments before):

Using the Firebase UI plugin with Gilde, I added the following dependency:

implementation 'com.firebaseui:firebase-ui-storage:6.2.0'

Now, having the StorageReference reference pointing to the image, and the ImageView in which the content must be uploaded, the following code retrieves the image and puts it in the ImageView:

Glide.with(ViewScenesSG.this)  //this is the current Activity
                .load(reference)
                .into(imageView);

To be mentioned that the ImageView must have the dimensions set to a specific value, not using wrap_content or match_parent (at least for height in my case), otherwise it will appear as a small icon. This can also depend on how the image was saved before in the Storage.

Hope this will help someone else as well!

---

Related Topics