Menu
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.
298
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.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
