动态更改img [src]

Question

我有包含记录列表的组件

export class HomeComponent implements OnInit {

    public wonders: WonderModel[] = [];

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

    ngOnInit(){}
}

this.wonders返回这样的值数组

我正试图像这样

动态获取图像源的id值

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

这样做我收到此错误

  

分析器错误：得到插值（{{}}），其中表达式是预期的   在[assets / images / {{wonder.id}}。jpg]

的第14栏

任何人都可以提出任何可能的解决方案。

Answer 1

你可以这样做：

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

或

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

Answer 2

你需要像这样绑定

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

[]与{{ }}不兼容。

Answer 3

它的插值，所以当你从后端打字稿创建完整路径并分配它时，你不需要[]，所以只需删除[]就可以了

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

当您绑定完整的vaule时，

[]会很有用，因为来自typescript，例如

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

在类型脚本中，您有路径变量

 const path = 'imagepath.jpg';

Answer 4

您正在

部分中使用插值和属性绑定

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

您可以删除属性绑定

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

或删除插值

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

有关详细信息，请查看Property Binding or Interpolation in Angular