Angular2中[src]和src的区别

Question

在Angular1中，

<img ng-src="{{imageUrl}}">

如果imageUrl为空，这将隐藏损坏的图像图标。

但是在Angular2中，两者都是

<img src="{{imageUrl}}">

等同于ngSrc

<img [src]="imageUrl">

如果imageUrl为空，

仍会将小的损坏图像图标显示为图像占位符。

那里的实际差异是什么？

Answer 1

您可以使用*ngIf

有条件地添加img

<img *ngIf="imageUrl" [src]="imageUrl">

Answer 2

区别仅在于您的用例的语义。

使用插值选项<img src="{{imageUrl}}">告诉angular将imageUrl的值放入该占位符。在您的情况下，将其插入值src属性。

使用模板表达式选项<img [src]="imageUrl">告诉angular将src属性的值显式设置为imageUrl的值。

Answer 3

[src]="imageUrl"是属性绑定，它将imageUrl的值分配给src属性。这适用于所有类型的值。

src="{{imageUrl}}"也执行属性绑定，但{{}}执行字符串插值，这意味着imageUrl在分配给src属性之前已经字符串化。如果要传递对象或数组或布尔值，请不要使用此样式。

使用DomSanitizer时[src]="..."是必需的，因为该值不再是字符串，而是一个对象并使用{{}}将以无效方式对其进行字符串化。