M'Boulas M'Boulas - 1 year ago 235
AngularJS Question

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

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download