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

【问题标题】：Display images from firebase storage in html img tags在 html img 标签中显示来自 firebase 存储的图像
【发布时间】：2016-11-22 00:00:36
【问题描述】：

我正在尝试将来自 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"/>

【问题讨论】：

您的 img src 属性包含字符串 "test" 作为 URL，它不包含测试变量的内容
downloadUrl 不再存在于 task.snapshot.downloadUrl 上
你有没有让这个工作？

标签： javascript html firebase firebase-storage

【解决方案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"/>

【讨论】：

【解决方案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;

&lt;img height="125" width="50"/&gt;

【讨论】：

我想知道下载 URL 末尾的那些令牌是否可以安全地显示给客户端？没事吧？

【解决方案3】：

试试这个:-)

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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




             });

            }


        );

【讨论】：

嗨，非常欢迎来到 StackOverflow！发布答案时的提示是包含一些解释您的代码示例的文本。这将有助于提出问题的人以及将来查看您的答案的人了解您的答案在做什么。感谢您为社区做出贡献！

【解决方案6】：

这是一个经过充分测试的代码。它工作正常。只需按照以下步骤操作即可。

html代码：

<img id="myImgId" src="" height="125" width="50"/>

在此处添加配置信息

  con = {
        "apiKey": "your key",
        "authDomain": "example.firebaseapp.com",
        "databaseURL": "https://example.firebaseio.com/",
        "projectId": "example",
        "storageBucket": "example.appspot.com",
        "messagingSenderId": "id"
    };

使用这个初始化firebase

firebase.initializeApp(con);

使用初始文件路径和名称创建引用

var storage = firebase.storage();
var storageRef = storage.ref();
//urll is the url for image
storageRef.child(urll).getDownloadURL().then(function(url) {
  // Or inserted into an <img> element:
  var img = document.getElementById('myImgId');
  img.src = url;
}).catch(function(error) {
  // Handle any errors
});

【讨论】：