gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 09:51:00 26 4
gpt4 key购买 nike

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

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

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

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

有什么想法吗?

谢谢!

最佳答案

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

你可以这样使用它:var someVar = var1 ||变量 2someVar 将具有 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

关于javascript - 图像占位符与 Angular 1 中的不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36536207/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com