CODEWITHSUNDEEP
angularjs
user1936584
user1936584

Reputation:

Set background image in css style angularjs

I want to set an image dynamically having the path of the image setted in a scope. The problem is that this is seen as a text, the value of selectedEvent.eventBannerImage is shown correctly, in my case the final url looks something like this:

background-image: url('/mydomain/images/banners\444b6e91-30fe-478b-a3d3-7984f0d35e69__1253402730_2873_full-269x300.jpg'), but it doesn't appear like a link as I need but just as a text. The image isn't shown.

<div style="background-image:    
    url('${pageContext.request.contextPath}/images/{{selectedEvent.eventBannerImage}}')">

Upvotes: 0

Views: 174

Answers (2)

sylwester
sylwester

Reputation: 16508

please see here: http://jsbin.com/zehawu/1/edit

ng-style="{'background-image': 
 'url({{pageContext.request.contextPath}}/images/{{selectedEvent.eventBannerImage}})'}"

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191829

You will need to use a directive for the binding -- probably ng-style. Unfortunately, ng-style takes an expression, not a string, so you can't use concatenation inside of it.

<div ng-style="ctrl.bgImage">

// In the controller:
this.bgImage = {"background-image": 
    "url(" + this.pageContext.request.contextPath
    + "/images/" + this.selectedEvent.eventBannerImage + ")"
};

Upvotes: 0

Related Questions