ng-style background-image URL funktioniert nicht für Firebase Storage-Referenz

Question

Ich versuche, Hintergrundbilder in einem Div zu laden. Ich habe verschiedene Optionen ausprobiert, aber meine Seite ist leer, es wird nichts angezeigt. Im Folgenden sind die verschiedenen Arten Ich habe versucht:

<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div> 

<div ng-style="{'background-image': 'url('{{profilepic}}')'}"></div> 

Wo in meinem Controller:

storageRef.child('images/pic.png').getDownloadURL().then(function(url) { 
    // Get the download URL for 'images/stars.jpg' 
    // This can be inserted into an <img> tag 
    // This can also be downloaded directly 
    $scope.profilepic = url; 
}).catch(function(error) { 
    // Handle any errors 
}); 

Es gibt keine Fehler in dem Konsolenprotokoll ist. Ich bekomme die tatsächliche URL.

Dies funktioniert funktioniert, wird te Bild richtig angezeigt, aber es ist nicht das, was ich zu erreichen bin versucht:

<div style="{'background-image': 'url('img/pic.png')'}"></div> 

ich durch Ähnliche Beiträge ging und versuchte, ihre Lösungen, aber keiner von ihnen scheint zu funktionieren.

Answer 1

ich endlich, was zu sehen war Problem. Ich muss das teilen, es kann anderen helfen. Alles war gut mit meinem HTML unten:

<ion-content> 
    <div ng-style="{'background-image': 'url('+pic+')'}"> 
     <div class="content"> 
      <div class="avatar" ng-style="{'background-image': 'url('+profilepic+')'}"></div> 
      <h3>{{fname.txt}} {{lname.txt}}</h3> 
     </div> 
    </div> 
</ion-content> 

Das Problem war in meinem Controller. Dies ist, was ich hatte:

auth.onAuthStateChanged(function(user) { 
    var storage = firebase.storage(); 
    var storageRef = storage.ref(); 
    var storageRefPic = ''; 
    storageRef.child('images/pic.jpg').getDownloadURL().then(function(url) { 
     storageRefDefltPic = url; 
    }).catch(function(error) { 
     // Handle any errors 
    }); 
    $scope.pic = storageRefDefltPic; 

    var storageRefProfilePic = ''; 
    storageRef.child('images/profilepic.jpg').getDownloadURL().then(function(url) { 
     storageRefProfilePic = url; 
    }).catch(function(error) { 
     // Handle any errors 
    }); 
    $scope.profilepic = storageRefProfilePic; 
    fbRef.child(userID).once('value').then(function(snapshot) { 
     $scope.fname.txt = snapshot.val().firstName; 
     $scope.lname.txt = snapshot.val().lastName; 
     $scope.pic = storageRefProfilePic; 
    }); 

}); 

Meine Variablen und Code wurden komplett durcheinander gebracht. In der Konsole wurde mir klar, dass die Firebase-Referenz zuerst aufgerufen wurde, bevor die Speicherreferenz, was dazu führte, dass meine Scope-Variablen leer wurden, folglich die Profilbilder leer waren. So entfernte ich unnötige Variablen und bewegt die Speicherreferenzen innerhalb der Callback, bevor die Daten Snapshot, wie unten:

auth.onAuthStateChanged(function(user) { 
    fbRef.child(userID).once('value').then(function(snapshot) { 
     var storage = firebase.storage(); 
     var storageRef = storage.ref(); 
     var storageRefPic = ''; 
     storageRef.child('images/pic.jpg').getDownloadURL().then(function(url) { 
      $scope.pic = url; 
     }).catch(function(error) { 
      // Handle any errors 
     }); 
     storageRef.child('images/profilepic.jpg').getDownloadURL().then(function(url) { 
      $scope.profilepic = url; 
     }).catch(function(error) { 
      // Handle any errors 
     }); 
      $scope.fname.txt = snapshot.val().firstName; 
      $scope.lname.txt = snapshot.val().lastName; 
    }); 
}); 

Jetzt ist alles gut funktioniert! Ich danke euch allen für eure Hilfe! Ich schätze dich wirklich!

Answer 2

Wenn ich dich richtig verstanden habe - das Problem ist ziemlich einfach gelöst. Sie müssen die Größe für die div einstellen oder etwas Inhalt hineinlegen, da background-image nicht als Inhalt zählt.

Das führt zu einem leeren div mit Höhe = 0;

hier ist eine Arbeits Fiddle

Answer 3

es sein sollte:

<div ng-style="{'background-image': 'url({{profilepic}})'}"></div> 

In Ihrem Fall sollten Sie diese verwenden:

<div ng-style="{'background-image': 'url(' + profilepic + ')'}"></div> 

Updated JSFiddle