ng-style background-image 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.

这有效，图像显示正确，但这不是我想要完成的：

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

我浏览了类似的帖子并尝试了他们的解决方案，但其中 none 似乎有效。

Answer 1

如果我的理解是正确的 - 问题就很容易解决了。您需要设置 div 的大小或将一些内容放入其中，因为 background-image 不算作内容。

这导致一个空的 div，高度 =0；

这是一个有效的 Fiddle

Answer 2

应该是：

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

在你的情况下你应该使用这个：

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

Updated JSFiddle

Answer 3

我终于明白问题出在哪里了。我必须分享这个，它可能会帮助别人。我下面的 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;
    });
});

现在一切正常！我感谢大家的帮助！我真的很感激你！

ng-style background-image url 不适用于 Firebase 存储参考

ng-style background-image url not working for Firebase Storage reference

background-image

angularjs

ng-style