在html img标签中显示来自firebase存储的图像

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

我已经测试了以下评论的两条线路.它工作正常.

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

有了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 3

如果您事先知道文件名，这是加载图像的一种巧妙方法：

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

删除 ?alt=media 以获取一些元数据。