0

我正在尝试在 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
});

控制台日志中没有错误。我得到了实际的网址。

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

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

我浏览了类似的帖子并尝试了他们的解决方案，但它们似乎都不起作用。

4

3 回答 3

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

});

我的变量和代码完全混淆了。在控制台中，我意识到首先调用了 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-30T06:32:48.110 回答
0

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

这导致div高度= 0的空；

这是一个工作小提琴

于 2016-06-29T06:52:25.997 回答
0

它应该是：

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

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

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

更新了 JSFiddle

于 2016-06-29T06:54:40.150 回答