firebase storageの画像をhtml imgタグで表示する

Question

firebaseからhtml imgタグに画像を表示しようとしていますが、画像を取得できません。

Javascriptコード：

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コード：

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

Answer 1

あなたがtest変数を持っていたら、スクリプトを使用して、それに画像のsrcを設定する必要があります。このような

何か：

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

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

この:-)を試してみてください210

Answer 3

コメント欄にはコメントは必要ありませんが、私はテストしました。それは正常に動作しています。

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




      }); 

      } 


     );