javascript - 图像占位符与 Angular 1 中的不同

Question

我想使用 Angular 2 显示占位符图像。

在 Angular 1 中，我们可以使用 ng-src，例如:

<img src="img/placeholder.jpg" ng-src="{{actualone.img}}">

但我不确定在 Angular 2 中执行此操作的正确方法是什么。

有什么想法吗？

谢谢!

Answer 1

我最喜欢的 javascript 简写之一是 or 运算符 ||

你可以这样使用它:var someVar = var1 ||变量 2。 someVar 将具有 var1 的值，除非它是 undefined，然后它将具有 var2 的值。

因此，在您的情况下，您可以将 src 属性绑定(bind)到 imageUrl || placeholderUrl

<img [src]="imageUrl || placeholderUrl| />

Here is a plunker

更新

用于在图像上方放置一个占位符，直到它完成加载。
我是通过以下方式实现的:

<img (load)="$event.target.src=imageUrl" src="imageUrl" [src]="placeholderImage" />

免责声明:

我不肯定这个“hack”会在所有浏览器中工作和/或在未来的 angular2 版本中继续工作。

说明:

首先我们为 src 属性设置一个初始 url，它将自动开始加载。然后，angular 将绑定(bind)到我们将设置为占位符图像的 [src]，然后在我们分配给 src 的原始图像完成加载后。 img 将触发一个 onLoad 事件，我们捕获该事件并将 src 重新分配给原始图像。

Here is a plunker