html - 在 Angular 应用程序中每 5 秒更改一次 div 中的图像

Question

您好，我正在构建一个 Angular 应用程序，作为其中的一部分，我想每 5 秒更改一次 div 中的图像。

当前代码

 <div class="outer_div">
     <img class="ahu_icon" src="../../assets/image1.png">
 </div>

我有一张不同的图片 - image2.png。我想每 5 秒一个接一个地显示这 2 张图像。有人可以帮忙吗？

谢谢

Answer 1

您可以使用一个 5 秒后发出值的 Observable delay()对于每个值，使用 concatMap() , 然后 repeat() .

this.src$ = of('../../assets/image1.png','../../assets/image2.png').pipe(
   concatMap(url => of(url).pipe(delay(5000))),
   repeat()
);

<img class="ahu_icon" [attr.src]="src$ | async">