J'ai téléchargé des images sur le stockage de Firebase, puis je dois afficher toutes ces images sur un site Web. J'ai lu le document depuis Firebase, mais je ne trouve toujours pas la bonne façon d'afficher toutes les photos. Donc, mes questions sont, où mon code est-il incorrect pour afficher une seule image? Comment afficher toutes les images sur le Web en même temps (j'ai lu un article sur le débordement de pile, il peut être nécessaire d'obtenir toutes les URL des images, donc la sous-question est de savoir comment obtenir toutes les URL des images)? Soit dit en passant, la base de données de ma base de données est vide.

<!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>

Et c'est le stockage de ma console Firebase.

firebase console's storage

6
OregonDuck 8 août 2016 à 02:42

2 réponses

Utilisation

<image src="your_image_url">

Donnez l'URL de l'image à l'attribut src, il affichera l'image du stockage Firebase.

-5
Cœur 25 août 2018 à 17:47

Une autre solution que celle acceptée, change simplement les règles par défaut pour permettre aux utilisateurs une autorisation en lecture seule à partir du répertoire appelé 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;
    }
  }
}

Après cela, récupérez l'url de téléchargement d'un fichier dans le répertoire et supprimez la partie token.

1
Eran H. 19 oct. 2017 à 06:33