Angular 2+ 中的图像源

【问题标题】：Image src in Angular 2+Angular 2+ 中的图像源
【发布时间】：2018-05-20 18:17:52
【问题描述】：

这些有区别吗？

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

<img [src]="url">

我知道在 AngularJS 中我们有 ng-src 指令，它被首选用于防止在 angular 接管之前从 {{url}} 加载图像。是不是一样的情况？

【问题讨论】：

达到同样的效果。由于[]s，[src] 不是一个已知的 HTML 属性，因此浏览器将不处理它并且不向 URL 发出请求。 try it out 真的很容易，只需运行您提供的具有不同 URL 的 HTML 并在您的开发人员工具中检查网络请求。

【解决方案1】：

<img [src]="heroImageUrl">

缺少

<img bind-src="heroImageUrl">

此代码的结果与<img src="{{url}}"> 相同。 [src] 这是用于属性绑定。但是，当您需要将某些数据绑定到属性时，您不能使用它。例如：

<td [attr.colspan]="1 + 1">

因为 colspan 不是属性而是 html 属性。

【讨论】：