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

Question

I'm trying to load background images in a div. I tried several options but my page is blank, nothing is displayed. Below are the different styles I tried:

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

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

Where, in my controller:

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

There is no error in the console log. I get the actual url.

This works works, te image is properly displayed, but it's not what I'm trying to accomplish:

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

I went through similar posts and tried their solutions, but none of them seem to work.

Answer 1

I finally see what was the problem. I have to share this, it may help others. Everything was fine with my HTML below:

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

The issue was within my controller. This is what I had:

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

});

My variables and code were completely mixed up. In the console, I came to realize that the firebase reference was getting called first, before the storage reference, causing my scope variables to come out empty, consequently the profile images to be blank. So I removed unnecessary variables and moved the storage references within the callback, before the data snapshot, as below:

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

Now everything is working fine! I thank you all guys for your help! I sure do appreciate you!