Angular2中[src]和src之间的区别[重复]答案

【问题标题】：Difference between [src] and src in Angular2 [duplicate]Angular2中[src]和src之间的区别[重复]
【发布时间】：2017-04-10 12:12:40
【问题描述】：

在 Angular1 中，

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

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

但在 Angular2 中，两者都

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

和ngSrc的等价物

<img [src]="imageUrl">

如果 imageUrl 为空，仍然会显示小的破损图像图标作为图像占位符。

那里的实际区别是什么？

【问题讨论】：

【解决方案1】：

您可以使用*ngIf 有条件地添加您的img

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：