using angular ng-style to call out a background image

Question

I am having an with using the ng-style directive. I want to create add a button to my ng-repeat which is css sprite. If i include the sprite normal way my element inspector has a good old moan. from the information i gather from the Angular documentation

i thought it was as simple as the following:

<button ng-style="{'background-image':'url:('/img/Myimage.png')'}">test</button>

However i am receiving a snytax error message from this line of code. Does anyone know the correct method?

You probably need to escape the quotes in url as: `'url:(\'/img/Myimage.png\')'` — idbentley, Nov 24 '13 at 15:34
syntax for `url` is incorrect, should not be `:` after it and quotes on src not required...would remove in angular markup — charlietfl, Nov 24 '13 at 15:54

score 1 · Answer 1 · answered Nov 24 '13 at 16:14

1

<button ng-style="{'background-image':'url(\'img/MyImage.png\')'}">test</button>

is the correct way to do it. was missing the escape the quotes in url 'url:(\'/img/Myimage.png\')'

answered Nov 24 '13 at 16:14

NewKidOnTheBlock

1,491
3
16
32

Denis · Answer 2 · 2013-11-24T16:02:32.153

0

oh,{color:' something',background:'something '}

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

or

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

edited Nov 24 '13 at 16:02

answered Nov 24 '13 at 15:53

Denis

45
9

score 0 · Answer 3 · answered Nov 24 '13 at 15:58

0

Your CSS syntax is incorrect for url, you have extra : and I would remove quotes for the src so the whole property is one string

<button ng-style="{'background-image':'url(/img/Myimage.png)'}">test</button>

I really don't undertsand why you would use ng-style for this. A simple CSS rule and class would make more sense since you aren't evaluating anything

answered Nov 24 '13 at 15:58

charlietfl

170,828
13
121
150

test actually work for me – NewKidOnTheBlock Nov 24 '13 at 16:03
what is point of using `ng-styl` in the first place for this? – charlietfl Nov 24 '13 at 16:05
Bcos my button is in an ng-repeat function. if i add this image to my css i get error messages inspector. It's for best practices – NewKidOnTheBlock Nov 24 '13 at 16:11
that makes no sense at all – charlietfl Nov 24 '13 at 16:21

using angular ng-style to call out a background image

3 Answers3

Linked