显示可变的html图像

Question

在Angular 2代码中，我将图像定义为：

public rObj:any = {};
this.rObj.imgsrc ="http:/../.png";

想通过我的HTML呈现此内容：

<img src = {{rObj.imgsrc}}>

没有任何显示。感谢任何帮助。谢谢！

Answer 1

对src属性使用一种方式绑定。任何html属性都可以绑定。

...所以这就是您要寻找的东西。

<img [src]="rObj.imgsrc" />

另一个例子。

<a [href]="myHref"></a>

Answer 2

您使用了错误的数据绑定：

• 字符串绑定：<elt attr="Hello World"/>
• 输入（组件→模板）：<elt [attr]="x"/>
• 事件监听器（模板→组件）：<button (click)="someFunction"/>
• 双向数据绑定：<elt [(attr)]="x"/>（不常用，请使用docs）

所以您实际上需要在这里写<img [src]="rObj.imgsrc"/>