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.

Answer 1

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