How to put background image in angular 2

Question

I tried putting background url for my image

 <div  [ngStyle]="{'background-image': 'url(' + https://s3-us-west-2.amazonaws.com/mysite/l/{{event.photo}} + ')'}"></div>

I am getting this error

Parser Error: Got interpolation ({{}}) where expression was expected

Can anyone please hepl me.Thanks.

{{}} cannot be used in `ngXXX`. – Pengyy May 04 '17 at 12:59 — Pengyy, May 04 '17 at 12:59

score 1 · Answer 1 · answered May 04 '17 at 12:36

1

I would suggest to build the styleString in the controller. The just use a simple variable in your code. Much cleaner this way.

answered May 04 '17 at 12:36

Alexander_F

Fribu is undeniably right - you should keep your data out of view. If you don't want to change your manner this time, remove interpolation brackets like this: `'url(https://s3-us-west-2.amazonaws.com/mysite/l/' + event.photo + ')'` – mankers May 04 '17 at 13:17

Shiladitya · Answer 2 · 2017-09-13T23:44:19.570

1

Yor can't use property binding & interpolation together.

So try using the below code only property binding

<div [ngStyle]="{'background-image': 'url(https://s3-us-west-2.amazonaws.com/mysite/l/' + event.photo + ')'}"></div>

Hope this will help you.

edited Sep 13 '17 at 23:44

answered Aug 26 '17 at 03:55

Shiladitya

score 0 · Answer 3 · answered Jul 19 '17 at 13:30

0

Try this instead:

<div  [ngStyle]="{'background-image': 'url('+'https://s3-us-west-2.amazonaws.com/mysite/l/'+event.photo+')'}"></div>

that works fine as of angular v4 and later

answered Jul 19 '17 at 13:30

codeExcalibur

score 0 · Answer 4 · answered Sep 28 '18 at 19:43

0

You can also use [style.background-image]

<div [style.background-image]="'url(https://s3-us-west-2.amazonaws.com/mysite/l/'+ event.photo +')'">

answered Sep 28 '18 at 19:43

Admir

score -1 · Answer 5 · edited May 23 '17 at 12:18

-1

I would like you verify above link to get better idea on background images

Thank you

edited May 23 '17 at 12:18

Community

answered May 05 '17 at 15:57

Sudharsan Sun

5 Answers5