How to show images in firebase storage by index.html

Question

I have uploaded some images to firebase's storage, and then I need to show all of these images on a website. I have read the doc from firebase, but still can't find the right way to show all pictures. So, my questions are, where is my code wrong to show an even single image? How to show all images on the web at the same time (I read a post on stack overflow, it may need to get all images' URLs, so, the sub question is how to get all images' URLs)? By the way, my firebase's database is empty.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

    <script src="https://www.gstatic.com/firebasejs/3.2.1/firebase.js"></script>
    <script>
        var config =
        {
            apiKey: "AIzaSyCKtgPuXUUqoyiwEm5sU3Blqc-A9xtBFsI",
            authDomain: "cropped-images.firebaseapp.com",
            databaseURL: "https://cropped-images.firebaseio.com",
            storageBucket: "cropped-images.appspot.com",
        };

        firebase.initializeApp(config);
        var storage = firebase.storage();
        var storageRef = storage.ref();
        var tangRef = storageRef.child('images/Tang.png');

        tangRef.getDownloadURL().then(function(url) 
        {
            var test = url
            document.querySelector('img').src = test;
        }).catch(function(error) 
        {
            switch (error.code) 
            {
                case 'storage/object_not_found':
                    break;

                case 'storage/unauthorized':
                    break;

                case 'storage/canceled':
                    break;

                case 'storage/unknown':
                    break;
            }
        });

        var test = 'firebase_url';
        document.querySelector('img').src = test;



    </script>
    <img height="125" width="125"/>
    </body>
</html>

And this my firebase console's storage.

firebase console's storage

How to show all images in firebase storage on web? Thanks a lot! — OregonDuck, Aug 07 '16 at 23:57
Repeating what was already in your question won't move us forward. What is keeping you from implementing that functionality? Is it that you don't know how to get a list of the files? Because if that is your question, have a look at this question/answer: http://stackoverflow.com/questions/37335102/how-to-get-an-array-with-all-pictures — Frank van Puffelen, Aug 08 '16 at 00:18
Thank you for your sharing. I had read this link before I asked this question. I am sorry, my question is not clear enough. I have two problems, first, I followed the doc on firebase's official website, and [Display images from firebase storage in html omg tags](http://stackoverflow.com/questions/38452633/display-images-from-firebase-storage-in-html-img-tags), but I still can't get the image in storage to show on web correctly. Where is my code wrong? Secondly , I didn't find the code to get all images' urls under the storage. How to get all images' urls? Again, thanks a lot! @FrankvanPuffelen — OregonDuck, Aug 08 '16 at 00:41
I'll answer your first question below. The linked question is the exact same as your second question. There is no API to list image URLs, so you'll have to store those somewhere else. For example in the Firebase Database. — Frank van Puffelen, Aug 08 '16 at 01:39

score 24 · Accepted Answer · edited Jun 20 '20 at 09:12

Getting the download URL for a file requires a roundtrip to the Firebase servers. This call (like most of the modern internet) happens asynchronously, since blocking the browser while waiting for a response would be a bad user experience.

The easiest way to see the flow in your code is to add some logging statements:

console.log('Before requesting download URL');
tangRef.getDownloadURL().then(function(url) {
    console.log('Got download URL');
});
console.log('After requesting download URL');

The console output will be:

Before requesting download URL

After requesting download URL

Got download URL

Probably not the order you expected and it means the code to set the download URL to the HTML, must be inside the then() callback.

You're also ignoring the errors that might be raised in the catch() callback. If you add some logging there:

tangRef.getDownloadURL().then(function(url)                             {
  document.querySelector('img').src = url;
}).catch(function(error) {
  console.error(error);
});

The code is not only a lot shorter, it actually shows precisely what the problem is:

GET https://firebasestorage.googleapis.com/v0/b/cropped-images.appspot.com/o/images%2FTang.png 403 ()

A 403 means that you don't have permission to read the image. Most likely you still have the default security rules on your Storage bucket, which means that only authenticated users can access the files. This is mentioned in the first blue note in the Firebase Storage docs for reading/writing files (emphasis mine):

Note: By default, Firebase Storage buckets require Firebase Authentication to upload files. You can change your Firebase Storage Security Rules to allow unauthenticated access. Since the default Google App Engine app and Firebase share this bucket, configuring public access may make newly uploaded App Engine files publicly accessible as well. Be sure to restrict access to your Storage bucket again when you set up authentication.

In this case, I went with the emphasized approach and added code to sign in the user (anonymously) before requesting the download URL of the image. This leads to the following complete code snippet:

var config = {
  apiKey: "AIzaSyCKtgPuXUUqoyiwEm5sU3Blqc-A9xtBFsI",
  authDomain: "cropped-images.firebaseapp.com",
  databaseURL: "https://cropped-images.firebaseio.com",
  storageBucket: "cropped-images.appspot.com",
};

firebase.initializeApp(config);
var storage = firebase.storage();
var storageRef = storage.ref();
var tangRef = storageRef.child('images/Tang.png');

// First we sign in the user anonymously
firebase.auth().signInAnonymously().then(function() {
  // Once the sign in completed, we get the download URL of the image
  tangRef.getDownloadURL().then(function(url)                             {
    // Once we have the download URL, we set it to our img element
    document.querySelector('img').src = url;
    
  }).catch(function(error) {
    // If anything goes wrong while getting the download URL, log the error
    console.error(error);
  });
});

The complete working jsbin: http://jsbin.com/kukifo/edit?html,js,console,output

Thank you so much,Frank. I do appreciate you sharing your intelligence with me. It saves me. I spend a whole day to study and research how to download and show image from firebase storage. There are many uploading examples, but there is a few examples of downloading online to show developers how to implement. I believe this example will save many people as well. Again, I do appreciate your spent your Sunday afternoon to answer my question. Have a good weekend! — OregonDuck, Aug 08 '16 at 02:56
Also, this is a really detailed explanation. Thank you so much! — OregonDuck, Aug 08 '16 at 02:57
You're welcome. Btw: storing the image URL in the Firebase Database is also covered in [step 10 of the Firebase Codelab](https://codelabs.developers.google.com/codelabs/firebase-web/#10). Take it all the way from [the start](https://codelabs.developers.google.com/codelabs/firebase-web/) though, since it steps you through a lot of Firebase features in turn. — Frank van Puffelen, Aug 08 '16 at 03:55
Thank you. I didn't even find this doc before. Again, thank you for sharing. Have a good one! — OregonDuck, Aug 08 '16 at 04:08

Eran H. · Answer 2 · 2017-10-19T06:33:46.770

Another solution than the accepted, simply change the default rules to allow users a read-only permission from the directory called images.

service firebase.storage {
  match /b/{bucket}/o {
    match /images/{fileName} {
      allow write: if request.auth != null;
      allow read;
    }

    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

After this, get the download url for a file in the directory and remove the token part.

score -14 · Answer 3 · edited Aug 25 '18 at 17:47

-14

Use

<image src="your_image_url">

Give image url to the src attribute, it will show image from firebase storage.

edited Aug 25 '18 at 17:47

Cœur

37,241
25
195
267

answered Oct 04 '17 at 16:39

Sanchit Varshney

1

How to show images in firebase storage by index.html

3 Answers3

Linked