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.

Possible duplicate of [Parser Error: Got interpolation ({{}}) where expression was expected](https://stackoverflow.com/questions/40203279/parser-error-got-interpolation-where-expression-was-expected) — David, Apr 05 '18 at 11:32

Suren Srapyan · Accepted Answer · 2018-04-05T11:32:14.967

37

You need to bind like this

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

[] is not compatible with {{ }}.

edited Apr 05 '18 at 11:32

answered Apr 05 '18 at 11:23

Suren Srapyan

66,568
14
114
112

I have something like that but when the wonder.id changes it takes some time to the browser show the results. – Luis Alfredo Serrano Díaz Mar 20 '21 at 16:07
In my case i have to use relative path, seems like it does not work. ie. – Omprakash Sharma Nov 29 '21 at 13:42

score 29 · Answer 2 · answered Apr 05 '18 at 11:27

29

You can do it like :

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

OR

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

answered Apr 05 '18 at 11:27

Vivek Doshi

56,649
12
110
122

score 15 · Answer 3 · answered Apr 05 '18 at 11:33

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

score 5 · Answer 4 · answered Apr 05 '18 at 11:28

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';

Change img [src] dynamically

4 Answers4

Linked