Javascript 如何改变图像后的时间间隔的角度？

所以我有一个图像和一些计数器。在计数器总数超过500之后，我想显示另一个图像

因此，我将此作为模板：

  <img src="./assets/noun_Arrow_green.png" alt="Forest" style="width: 50%" />

但我必须改变什么

---

谢谢

为组件中的

src

创建一个参数

imageSource:string="./assets/noun_Arrow_green.png"

在html中给出这个参数

  <img [src]="imageSource" alt="Forest" style="width: 50%" />

increaseTime() {
    this.counters.forEach(() => {
      setInterval(() => {
        this.counters[0]++;
        this.counters[1] = this.counters[1] + 10;
        this.counters[2] = this.counters[2] + 17;
        
        if (this.counters[0] + this.counters[1] + this.counters[2] > 500) {
          clearInterval();
          this.imageSource="./assets/noun_Arrow_red.png"
        }
      }, 3000);
    });
  }

  <img [src]="imageSource" alt="Forest" style="width: 50%" />

increaseTime() {
    this.counters.forEach(() => {
      setInterval(() => {
        this.counters[0]++;
        this.counters[1] = this.counters[1] + 10;
        this.counters[2] = this.counters[2] + 17;
        
        if (this.counters[0] + this.counters[1] + this.counters[2] > 500) {
          clearInterval();
          this.imageSource="./assets/noun_Arrow_red.png"
        }
      }, 3000);
    });
  }