ng形式の背景画像のURLがFirebaseのストレージ参照で動作しない

Question

divに背景画像をロードしようとしています。いくつかのオプションを試しましたが、私のページは空白です。何も表示されません。以下は、私が試したさまざまなスタイルがあります：

、私のコントローラで

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

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

：

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

は、コンソールログにはエラーはありません。私は実際のURLを取得します。

これは、TEの画像が正しく表示されますが、それは私が達成しようとしているものではないのですが、作品を作品：

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

私は同様のポストを経て、その解決策を試してみましたが、それらのどれも動作するようには思えません。

Answer 1

をやっとだったかを見ます問題。私はこれを共有しなければならない、それは他人を助けるかもしれない。下のHTMLですべてがうまくいっています：

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

問題は私のコントローラの中でした。これは私が持っていたものです：

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

}); 

私の変数とコードは完全に混ざりました。コンソールでは、ストレージリファレンスの前にファイヤーベースリファレンスが最初に呼び出され、スコープ変数が空になり、結果としてプロファイルイメージが空白になることがわかりました。だから私は、不要な変数を削除し、データのスナップショットの前に、コールバック内のストレージの参照を移動し、以下のように：

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

今、すべてが正常に動作しています！あなたのお手伝いをしてくださったみなさん、ありがとう！私は確かにあなたに感謝します！

Answer 2

あなたが正しいと理解していれば、問題はかなり簡単に解決されます。 divのサイズを設定するか、background-imageはコンテンツとしてカウントされないため、コンテンツを内部に配置する必要があります。

これは、高さ= 0の空のdivにつながります。あなたは、この使用すべき

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

あなたのケースでは：ここ

はそれがあるべき作業Fiddle

Answer 3

ある

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

Updated JSFiddle