ng樣式的背景圖片url無法用於Firebase存儲參考

我正試圖在div中加載背景圖片。我嘗試了幾個選項，但我的頁面是空白的，沒有顯示任何內容。下面是不同的風格我想：ng樣式的背景圖片url無法用於Firebase存儲參考

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

有控制檯日誌中沒有錯誤。我得到了實際的網址。

此作品的作品，顯示正常TE的形象，但它不是我想要做到：

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

我通過類似的帖子去了，試過他們的解決方案，但他們都不工作。

來源

2016-06-29 M' Boulas

我終於看出了什麼問題。我必須分享這一點，它可能會幫助他人。一切都很好，我的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; 
    }); 

});

我的變量和代碼被完全混淆了。在控制檯中，我意識到firebase引用在存儲引用之前首先被調用，導致我的範圍變量空出來，因此配置文件圖像變爲空白。所以我刪除不必要的變量和移動的回調中存儲的引用，數據快照之前，如下：

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

現在一切正常！我感謝大家的幫助！我確實很感激你！

來源

2016-06-30 06:32:48

如果我理解你正確 - 問題解決相當容易。您需要設置div的尺寸或將一些內容放在裏面，因爲background-image不算作內容。

這導致一個空的div高度= 0;

這裏是一個工作Fiddle

來源

2016-06-29 06:52:25

我按照你的建議添加了高度和寬度，但不起作用。 –

你檢查了我的小提琴嗎？ –

是非常感謝！我檢查了你的小提琴。這真的很有幫助。當我在你的小提琴中嘗試我的網址時，我發現兩幅背景圖像都被完美呈現;我意識到這與網址無關。然後，我看着我的控制檯日誌，看看發生了什麼，並檢查我的代碼。這就是我意識到我的代碼混淆的原因。再一次，非常感謝，這非常有幫助！你可以看到上面的代碼和我的解釋。 –

它應該是：

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

在你的情況，你應該這樣做：

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

Updated JSFiddle

來源

2016-06-29 06:54:40

這不適合我。這裏是一個[小提琴]（http://jsfiddle.net/gdeohueo/） –

我更新了答案 –

@Michelem我再次嘗試第二個選項，但仍然不起作用。 –

ng樣式的背景圖片url無法用於Firebase存儲參考

回答

相關問題