Display images from firebase storage in html img tags

Question

I'm attempting to display an image from firebase into html img tags, but it fails to retrieve the image.

Javascript code:

var storageRef = firebase.storage().ref();
var spaceRef = storageRef.child('images/photo_1.png');
var path = spaceRef.fullPath;
var gsReference = storage.refFromURL('gs://test.appspot.com')

storageRef.child('images/photo_1.png').getDownloadURL().then(function(url) {
  var test = url;
}).catch(function(error) {

});

html code:

<img src="test" height="125" width="50"/>

Answer 1

Once you have the test variable, you need to set the image's src to it using a script.

Something like this:

 //var storage = firebase.storage(); //var storageRef = storage.ref(); //var spaceRef = storageRef.child('images/photo_1.png'); // //storageRef.child('images/photo_1.png').getDownloadURL().then(function(url) { // // // var test = url; // add this line here: // document.querySelector('img').src = test; // //}).catch(function(error) { // //}); // var test = 'firebase_url'; document.querySelector('img').src = test;

 <img height="125" width="50"/>

Answer 2

The bellow two lines which is commented are not required, I have tested. it is working fine.

//var path = spaceRef.fullPath;
//var gsReference = storage.refFromURL('gs://test.appspot.com')

    <script>
     function showimage() {



         var storageRef = firebase.storage().ref();
         var spaceRef = storageRef.child('sweet_gift/vytcdc.png');
         storageRef.child('sweet_gift/vytcdc.png').getDownloadURL().then(function(url) {
             var test = url;
             alert(url);
             document.querySelector('img').src = test;

         }).catch(function(error) {

         });


     }
    </script>
    <input type="button" value ="view Image" id="viewbtn" onclick="showimage();">
    <img src="test" height="125px" width="200px"/> 

Answer 3

try this :-)

 //var storage = firebase.storage(); //var storageRef = storage.ref(); //var spaceRef = storageRef.child('images/photo_1.png'); // //storageRef.child('images/photo_1.png').getDownloadURL().then(function(url) { // // // var test = url; // add this line here: // document.getElementById("your_img_id").src = test; // //}).catch(function(error) { // //}); //

<img height="125" width="50" id="your_img_id" src=""/>

Answer 4

This is a neat way to load the images if you know the filenames in advance:

https://firebasestorage.googleapis.com/v0/b/{{BUCKET}}/o/images%2{{FILENAME}}?alt=media

Remove the ?alt=media to get some metadata.

Answer 5

           var uploader=document.getElementById('uploader'),
           fileButton=document.getElementById('fileButton');

           fileButton.addEventListener('change', function(e) {

           var file=e.target.files[0];

           var storageRef=firebase.storage().ref("'/images/'"+file.name);


            var task=storageRef.put(file);

            task.on('state_changed',

            function progress(snapshot){
            var percentage=( snapshot.bytesTransferred / snapshot.totalBytes )*100;
            uploader.value=percentage;
            if (percentage==100){
            alert("file uploaded Successfully");
            }
            },
            function error(err){

            },
            function complete(){

                 var text1=document.getElementById('text3');
                 var text7=document.getElementById('text4');
                 var text8=document.getElementById('text5');
                 var text9=document.getElementById('text6');

                var downloadURL =task.snapshot.downloadURL; 
                var postkey=firebase.database().ref('data-modeling/').push();
                var text2=text1.value;
                postkey.child("Name").set(text2);
                var texta=text7.value;
                postkey.child("Address").set(texta);
                var textb=text8.value;
                postkey.child("Age").set(textb);
                var textc=text9.value;
                postkey.child("PhoneNo").set(textc);
                postkey.child("url").set(downloadURL)
                alert('successful Submit');




             });

            }


        );

Answer 6

This is a well-tested code. it is working fine. just follow these steps.

html code:

<img id="myImgId" src="" height="125" width="50"/>

Add config Information here

  con = {
        "apiKey": "your key",
        "authDomain": "example.firebaseapp.com",
        "databaseURL": "https://example.firebaseio.com/",
        "projectId": "example",
        "storageBucket": "example.appspot.com",
        "messagingSenderId": "id"
    };

Initialize firebase using this

firebase.initializeApp(con);

Create a reference with an initial file path and name

var storage = firebase.storage();
var storageRef = storage.ref();
//urll is the url for image
storageRef.child(urll).getDownloadURL().then(function(url) {
  // Or inserted into an <img> element:
  var img = document.getElementById('myImgId');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});