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.

sqren · Answer 1 · 2018-08-29T21:41:17.297

191

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})`}"

edited Aug 29 '18 at 21:41

answered Oct 28 '13 at 19:00

sqren

22,833
7
52
36

13

This actually is the best answer (or at least to my problem...) – standup75 Nov 07 '13 at 03:05
5

Also you can write an expression using curly braces: `data-ng-style="{'background-image':'url(img/products/{{product.img}})'}"` – mykola.rykov Jun 15 '14 at 16:01
1

Beware, if you're using incorrect syntax (like escaped single-quotes inside `url()`) the browser may reject the value and not set it. – Sep 02 '16 at 17:29
your option was not working for me. but the 2nd option DID work. Thanks – Joe Naber Mar 09 '17 at 17:54
first is not working. second work. the best answer thanks – Adesh Kumar Mar 26 '19 at 06:01

score 114 · Accepted Answer · answered Jun 22 '13 at 17:02

114

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)'}">

answered Jun 22 '13 at 17:02

Stewie

60,366
20
146
113

btw, how do I render something like: `{{products.products[currenRoute].desc}}`; in html ? – Roland Jun 22 '13 at 17:17
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. – Stewie Jun 22 '13 at 17:21
Something like that, but I already have access to `currenRoute`. It's a string, so I have a list of products: http://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 ... – Roland Jun 22 '13 at 17:29
Using, for example [underscore.js](http://underscorejs.org/#findWhere), in your controller: `$scope.product = _($scope.products).findWhere({id: $scope.currentRoute})`, and than in your view: `{{product.title}}`. But let's not use comments as a chat. Post a new question. – Stewie Jun 22 '13 at 17:35

score 15 · Answer 3 · answered Jun 16 '14 at 15:00

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.

Taku · Answer 4 · 2015-10-13T10:34:12.317

10

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 + ')'
    }
}

edited Oct 13 '15 at 10:34

answered Nov 06 '14 at 19:26

Taku

5,639
2
42
31

2

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! – w3bMak3r Feb 07 '15 at 01:35
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. – davidkonrad Apr 20 '17 at 05:56

score 1 · Answer 5 · answered Jan 04 '16 at 13:11

1

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.

answered Jan 04 '16 at 13:11

mkkhedawat

1,687
2
17
34

score 1 · Answer 6 · answered Jun 13 '16 at 09:27

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.

Whats the source of the citation? – Manas Jun 27 '17 at 12:20 — Manas, Jun 27 '17 at 12:20

score 0 · Answer 7 · answered Aug 13 '15 at 21:29

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.

Maihan Nijat · Answer 8 · 2019-11-11T16:42:31.540

0

The syntax is changed for Angular 2 and above:

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

edited Nov 11 '19 at 16:42

answered Aug 07 '19 at 15:05

Maihan Nijat

9,054
11
62
110

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

8 Answers8

Linked