Display images from firebase storage in html img tags

Question

I am trying to map an image from firebase to html img tags, but it cannot get 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 src image using a script.

Something like that:

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

Below are two lines that are commented, I have not tested. It works 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 the following :-)

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

  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'); }); } );