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.

Answer 1

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

Answer 2

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

Angular2 dynamic background images

Attribute property binding for background-image url in Angular 2

Thank you

Answer 3

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

Answer 4

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.

Answer 5

You can also use [style.background-image]

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