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

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

这项工作正常，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;
    });

});

我的变量和代码完全混淆了。在控制台中，我开始意识到在存储引用之前首先调用了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;
    });
});

现在一切正常！我感谢你们所有人的帮助！我确实很感谢你！

Answer 2

如果我理解你是对的 - 问题很容易解决。您需要设置div的大小或将一些内容放在里面，因为background-image不计入内容。

这导致空div，身高= 0;

这是一个有效的Fiddle

Answer 3

应该是：

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

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

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

Updated JSFiddle

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

3 个答案: