动态更改 img [src]答案

【问题标题】：Change img [src] dynamically动态更改 img [src]
【发布时间】：2018-09-15 04:53:37
【问题描述】：

我有一个包含记录列表的组件

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 列

谁能为此提出任何可能的解决方案。

【问题讨论】：

你在 SO 上找不到任何东西吗？
Parser Error: Got interpolation ({{}}) where expression was expected的可能重复
stackoverflow.com/q/46407334/5468463

标签： angular typescript

【解决方案1】：

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

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

您可以删除属性绑定

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

或删除插值

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

欲了解更多信息，请查看Property Binding or Interpolation in Angular

【讨论】：

【解决方案2】：

你需要这样绑定

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

[] 与 {{ }} 不兼容。

【讨论】：

我有类似的东西，但是当 wonder.id 发生变化时，浏览器需要一些时间才能显示结果。
在我的情况下，我必须使用相对路径，似乎它不起作用。 IE。

【解决方案3】：

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

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

[] 在绑定来自打字稿的完整值时很有帮助，例如

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

在类型脚本中你有路径变量

 const path = 'imagepath.jpg';

【讨论】：

【解决方案4】：

你可以这样做：

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

或

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

【讨论】：