angularjs ng-style: background-image isn't working
Solution 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)'}">
Solution 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})`}"
Solution 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.
Solution 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 + ')'
}
}
Solution 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.
Roland
Nothing else to say that I haven't already at rolandsdev.blog.
Updated on November 12, 2020Comments
-
Roland over 3 years
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. -
Roland about 11 yearsbtw, how do I render something like:
{{products.products[currenRoute].desc}}
; in html ? -
Stewie about 11 yearsI 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. -
Roland about 11 yearsSomething 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 mycurrentRoute
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 ... -
Stewie about 11 yearsUsing, 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. -
standup75 over 10 yearsThis actually is the best answer (or at least to my problem...)
-
mykola.rykov about 10 yearsAlso you can write an expression using curly braces:
data-ng-style="{'background-image':'url(img/products/{{product.img}})'}"
-
w3bMak3r over 9 yearsYou 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!
-
Admin almost 8 yearsBeware, if you're using incorrect syntax (like escaped single-quotes inside
url()
) the browser may reject the value and not set it. -
Joe Naber over 7 yearsyour option was not working for me. but the 2nd option DID work. Thanks
-
davidkonrad about 7 yearsWas 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.
-
Manas almost 7 yearsWhats the source of the citation?
-
Adesh Kumar over 5 yearsfirst is not working. second work. the best answer thanks