angular 点击切换展示本地图片

要实现在 Angular 中点击切换展示本地图片，你可以使用一个变量来存储当前展示的图片路径，然后在用户点击时更改该变量的值。可以使用 `(click)` 事件来捕获用户点击，并使用 `[src]` 属性将当前展示的图片路径绑定到 `img` 标签上。

以下是一个基本的实现示例：

HTML 模板：

<button (click)="toggleImage()">切换图片</button>
<img [src]="currentImage" alt="My Image">

TypeScript 组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-image-toggle',
  templateUrl: './image-toggle.component.html',
  styleUrls: ['./image-toggle.component.css']
})
export class ImageToggleComponent {
  private imagePaths = ['./assets/images/image1.png', './assets/images/image2.png', './assets/images/image3.png'];
  currentImage = this.imagePaths[0];

  toggleImage() {
    const currentIndex = this.imagePaths.indexOf(this.currentImage);
    const nextIndex = (currentIndex + 1) % this.imagePaths.length;
    this.currentImage = this.imagePaths[nextIndex];
  }
}

在上面的示例中，`imagePaths` 数组包含要展示的所有图片的本地路径。`currentImage` 变量存储当前展示的图片路径，默认为数组中的第一张图片。`toggleImage()` 方法在用户点击按钮时触发，它计算出当前图片在数组中的索引，然后将 `currentImage` 变量设置为下一张图片的路径。请注意，这里使用模数运算符将索引限制在数组范围内，以便在达到数组末尾时循环回到第一张图片。最后，`[src]` 属性将 `currentImage` 变量绑定到 `img` 标签上，以便显示当前展示的图片。