动态更改img [src] [英] Change img [src] dynamically

问题描述

我有记录列表的组件

export class HomeComponent implements OnInit {

    public wonders: WonderModel[] = [];

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

    ngOnInit(){}
}

this.wonders返回这样的值数组

this.wonders returns array of values like this

我试图像这样将ID值动态获取到图像源

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

解析器错误:在需要表达式的地方进行了插值({{}})在[assets/images/{{wonder.id}}.jpg]的第14列中

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.

推荐答案

您需要像这样绑定

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

[] 与 {{}} 不兼容.

这篇关于动态更改img [src]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！