Hiển thị hình ảnh từ bộ nhớ firebase trong thẻ html img

Question

Tôi đang cố gắng hiển thị hình ảnh từ firebase thành html img thẻ nhưng không thể truy xuất hình ảnh.

mã 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) { 

}); 

mã html:

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

Answer 1

Một khi bạn đã biến test, bạn cần phải thiết lập src của hình ảnh để nó sử dụng một kịch bản.

Something như thế này:

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

thử :-) này

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

Hai dòng dưới đây được nhận xét là không bắt buộc, tôi đã thử nghiệm. nó hoạt động tốt.

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




      }); 

      } 


     );