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
– idbentley, Commented Nov 24, 2013 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
– charlietfl, Commented Nov 24, 2013 at 15:54

NewKidOnTheBlock · Accepted Answer · 2013-11-24 16:14:17Z

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, 2013 at 16:14

NewKidOnTheBlock

1,5113 gold badges17 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2013-11-24 15:58:18Z

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, 2013 at 15:58

charlietfl

172k14 gold badges125 silver badges154 bronze badges

4 Comments

NewKidOnTheBlock Over a year ago

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

charlietfl Over a year ago

what is point of using ng-styl in the first place for this?

NewKidOnTheBlock Over a year ago

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

charlietfl Over a year ago

that makes no sense at all

Denis · Accepted Answer · 2013-11-24 16:02:32Z

0

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

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

or

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

edited Nov 24, 2013 at 16:02

answered Nov 24, 2013 at 15:53

Denis

459 bronze badges

Collectives™ on Stack Overflow

using angular ng-style to call out a background image

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related