Change img [src] dynamically

Question

I have component which have list of records

export class HomeComponent implements OnInit {

    public wonders: WonderModel[] = [];

    constructor(private ms: ModelService){
        ms.wonderService.getWonders();
        this.wonders = ms.wonderService.wonderList;
    }

    ngOnInit(){}
}

this.wonders returns array of values like this

I am trying to get that id value to image source dynamically like this

<div class="img-content" *ngFor="let wonder of wonders">
    <header class="img-content-header">
        <div style="width: 45px; display: table-cell;"> <img [src]='assets/images/{{wonder.id}}.jpg'  height="40px" width="40px"> </div>
        <div style="display: table-cell;">
            <div>{{wonder.name}}</div>
        </div>
    </header>
</div>

While doing so I am getting this error

Parser Error: Got interpolation ({{}}) where expression was expected at column 14 in [assets/images/{{wonder.id}}.jpg]

Can anyone suggest any possible solution for that.

Answer 1

You need to bind like this

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

[] is not compatible with {{ }}.

Answer 2

You can do it like :

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

OR

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

Answer 3

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

Answer 4

its interpolation , so you dont need [] that is needed when you create full path from the back-end typescript and assign it , so just removing [] will work for you

<img src='assets/images/{{wonder.id}}.jpg'  height="40px" width="40px">

---

[] is helpful when you are binding full vaule which so coming from typescript, example

<img [src]='path'  height="40px" width="40px"> 

in type script you are having path variable

 const path = 'imagepath.jpg';