angularjs ng-style: background-image isn't working

Question

I'm trying to apply a background image to a div by using the angular ng-style ( I tried a custom directive before with the same behaviour ), but it doesn't seem to be working.

<nav
    class="navigation-grid-container"
    data-ng-class="{ bigger: isNavActive == true }"
    data-ng-controller="NavigationCtrl"
    data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true"
    data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false"
    data-ng-show="$parent.navInvisible == false"
    data-ng-animate="'fade'"
    ng-cloak>

    <ul class="navigation-container unstyled clearfix">
        <li
            class="navigation-item-container"
            data-ng-repeat="(key, item) in navigation"
            data-ng-class="{ small: $parent.isNavActive, big: isActive == true }"
            data-ng-mouseenter="isActive = true; isInactive= false"
            data-ng-mouseleave="isActive = false; isInactive= true">

            <div data-ng-switch on="item.id">

                <div class="navigation-item-default" data-ng-switch-when="scandinavia">
                    <a class="navigation-item-overlay" data-ng-href="{{item.id}}">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text" data-ng-class="{ small: isScandinavia }">{{item.teaser}}</span>
                        </div>
                    </a>
                    <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span>
                </div>

                <div class="navigation-item-last" data-ng-switch-when="static">
                    <div class="navigation-item-overlay">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text">
                                <img data-ng-src="{{item.teaser}}">
                            </span>
                        </div>
                    </div>
                    <span class="navigation-item-background">
                        <img class="logo" data-ng-src="{{item.images.logo}}">
                    </span>
                </div>

                <div class="navigation-item-default" data-ng-switch-default>
                    <a class="navigation-item-overlay" data-ng-href="{{item.id}}">
                        <div class="navigation-item-teaser">
                            <span class="navigation-item-teaser-text">{{item.teaser}}</span>
                        </div>
                    </a>
                    <span class="navigation-item-background" data-ng-style="{ 'background-image': 'public/img/products/{{item.id}}/detail/wide/{{item.images.detail.wide[0]}}' }"></span>
                </div>

            </div>
        </li>
    </ul>
</nav>

Though, if I do try a background color, it seems to be working fine. I tried a remote source and a local source too http://lorempixel.com/g/400/200/sports/, neither worked.

Unsure

Answer 1

Correct syntax for background-image is:

background-image: url("path_to_image");

Correct syntax for ng-style is:

ng-style="{'background-image':'url(https://www.google.com/images/srpr/logo4w.png)'}">

Johan

btw, how do I render something like: {{products.products[currenRoute].desc}}; in html ? – Unsure

I suppose currentRoute is a product ID from the route? If that's the case then $routeParams service, if you inject it into your controller, will hold the reference to your id ($scope.productId = $routeParams.id), given that your route is defined as '/products/:id'. But you might want to open a new question for that. – Johan

Something like that, but I already have access to currenRoute. It's a string, so I have a list of products: snippi.com/s/rznpfvo ; and my currentRoute it's a string which matches one of the id's in the list of products. And since I cannot do {{products.products.currenRoute.desc}} I have to find another way ... – Unsure

Using, for example underscore.js, in your controller: $scope.product = _($scope.products).findWhere({id: $scope.currentRoute}), and than in your view: <span>{{product.title}}</span>. But let's not use comments as a chat. Post a new question. – Johan

Answer 2

It is possible to parse dynamic values in a couple of way.

Interpolation with double-curly braces:

ng-style="{'background-image':'url({{myBackgroundUrl}})'}"

String concatenation:

ng-style="{'background-image': 'url(' + myBackgroundUrl + ')'}"

ES6 template literals:

ng-style="{'background-image': `url(${myBackgroundUrl})`}"

Gainer

This actually is the best answer (or at least to my problem...) – Brundisium

Also you can write an expression using curly braces: data-ng-style="{'background-image':'url(img/products/{{product.img}})'}" – Romney

Beware, if you're using incorrect syntax (like escaped single-quotes inside url()) the browser may reject the value and not set it. – Gibraltar

your option was not working for me. but the 2nd option DID work. Thanks – Durance

first is not working. second work. the best answer thanks – Gauguin

Answer 3

IF you have data you're waiting for the server to return (item.id) and have a construct like this:

ng-style="{'background-image':'url(https://www.myImageplusitsid/{{item.id}})'}"

Make sure you add something like ng-if="item.id"

Otherwise you'll either have two requests or one faulty.

Formality

Answer 4

For those who are struggling to get this working with IE11

HTML

<div ng-style="getBackgroundStyle(imagepath)"></div>

JS

$scope.getBackgroundStyle = function(imagepath){
    return {
        'background-image':'url(' + imagepath + ')'
    }
}

Sailboat

You just saved my life right now thank you.. I have spent hours trying to figure out why my ng-style was not showing in IE 11. I still don't understand why but this worked! – Perchance

Was the only thing that worked in chromium as well (ubuntu) all other examples or "the official way" seems to be ignored. The style is changed but have no effect. – Consequent

Answer 5

This worked for me, curly braces are not required.

ng-style="{'background-image':'url(../../../app/img/notification/'+notification.icon+'.png)'}"

notification.icon here is scope variable.

Sandbox

Answer 6

If we have a dynamic value that needs to go in a css background or background-image attribute, it can be just a bit more tricky to specify.

Let’s say we have a getImage() function in our controller. This function returns a string formatted similar to this: url(icons/pen.png). If we do, the ngStyle declaration is specified the exact same way as before:

ng-style="{ 'background-image': getImage() }"

---

Make sure to put quotes around the background-image key name. Remember, this must be formatted as a valid Javascript object key.

Holmann

Whats the source of the citation? – Kaykaya

Answer 7

Just for the records you can also define your object in the controller like this:

this.styleDiv = {color: '', backgroundColor:'', backgroundImage : '' };

and then you can define a function to change the property of the object directly:

this.changeBackgroundImage = function (){
        this.styleDiv.backgroundImage = 'url('+this.backgroundImage+')';
    }

Doing it in that way you can modify dinamicaly your style.

Legitimize

Answer 8

The syntax is changed for Angular 2 and above:

[ngStyle]="{'background-image': 'url(path)'}"

Extremely