Change img [src] dynamically

You can do it like :

[src]='"assets/images/"+wonder.id+".jpg"'

src='assets/images/{{wonder.id}}.jpg'

You are using interpolation and property binding in the section

[src]='assets/images/{{wonder.id}}.jpg'

You could either remove the property binding

src='assets/images/{{wonder.id}}.jpg'

or remove the interpolation

[src]='assets/images/' + wonder.id + '.jpg'

For more information check out Property Binding or Interpolation in Angular

You need to bind like this

<img src='{{ "assets/images/" + wonder.id + ".jpg" }}'

[] is not compatible with {{ }}.

Related