Bilder aus FB-Speicherung im html-img-tags

Ich bin versucht, ein Bild anzuzeigen, das von der Feuerstellung in html img - tags, aber es schlägt fehl, um das Bild abzurufen.

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"/>
  • Ihre img-src-Attribut enthält den string "test" als URL, es enthält nicht den Inhalt der variable test
  • downloadUrl nicht mehr vorhanden ist, auf Aufgabe.snapshot.downloadUrl
  • Haben Sie jemals bekommen, das dies funktioniert?
InformationsquelleAutor crispy2k12 | 2016-07-19
  1. 5

    Sobald Sie die test variable, die Sie benötigen, um das Bild 'src', um es mit einem script.

    Etwas wie dieses:

    JS:

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

    HTML:

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

    InformationsquelleAutor Mosh Feu
  2. 6

    Dem unten zwei Zeilen, die auskommentiert sind nicht erforderlich, die ich getestet habe. es ist in Ordnung.

    //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"/>
    InformationsquelleAutor VyTcdc
  3. 2

    versuchen Sie dieses 🙂

    JS:

    //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=""/>
    InformationsquelleAutor Thando Zondo
  4. 0
               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');




             });

            }


        );
    • Hallo, und ganz herzlich Willkommen auf StackOverflow! Ein Tipp beim posten von Antworten, text einfügen und erkläre deinen code-Beispiele. Das wird helfen, die person, die die Frage gestellt hat, und auch die Menschen betrachten Sie Ihre Antwort in die Zukunft zu verstehen, was Ihre Antwort tut. Vielen Dank für den Beitrag an die Gemeinschaft!
    InformationsquelleAutor Rajender rathore
Schreibe einen Kommentar