0

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.

Mistalis
  • 17,793
  • 13
  • 73
  • 97
M'Boulas
  • 133
  • 1
  • 2
  • 14

3 Answers3

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!

M'Boulas
  • 133
  • 1
  • 2
  • 14
0

If I understood you correct - the problem is solved fairly easy. You need to set the size for the div or put some content inside as background-image does not count as content.

Which leads to an empty div with height =0;

here is a working Fiddle

Max Novich
  • 1,169
  • 9
  • 20
  • I added height and width as you suggested, but it's not working. – M'Boulas Jun 29 '16 at 20:19
  • Did you check my fiddle? – Max Novich Jun 30 '16 at 08:19
  • yes Thanks a lot! I checked your fiddle. It was really helpful. When I tried my URLs in your fiddle, I found out that both background images were being rendered perfectly; I realized then it had nothing to do with the URLs. Then I looked at my console log to see what was going, and check my code. That's how I realized the mixed up in my code. Once again, thanks a lot, it was very helpful! You can see the code and my explanation above. – M'Boulas Jun 30 '16 at 08:53
  • You should accept your own answer as mine has nothing to do with your problem. – Max Novich Jun 30 '16 at 11:45
  • Well I was still missing the width and height. So thanks – M'Boulas Jul 01 '16 at 00:49
0

It should be:

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

In your case you should use this:

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

Updated JSFiddle

michelem
  • 14,430
  • 5
  • 50
  • 66