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

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 2

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"/>