Html 如何在单击Angular 9中的按钮时更改src图像

我制作了4个不同背景颜色的按钮，我正在尝试在单击其中一些按钮以使用正确的颜色更改手机图像时创建功能。我不知道该怎么做，我已经试了5个小时了，还是一无所获。这里是我的html按钮，方法中的逻辑是空的。谢谢大家!

          <button class="card" style="height: 30px; width: 30px; background-color: palegoldenrod"
                  (click)="gold()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: silver"
                  (click)="silver()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: darkslategrey"
                  (click)="midnight()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: grey"
                  (click)="spacegrey()"></button>

---

您可以使用angular的双向绑定，因此只需将[src]设置为image并通过函数调用更新image url即可

<img [src]="image">

---

其中，

image

将在您的ts文件中定义，并将在这些特定函数中使用图像源进行更新。

您可以使用角度的双向绑定，因此只需将[src]设置为image，并从函数调用中更新图像url即可

<img [src]="image">

其中，

image

将在ts文件中定义，并将在这些特定函数中使用图像源进行更新。

Html:

  <button class="card" style="height: 30px; width: 30px; background-color: palegoldenrod"
                      (click)="changeColor('palegoldenrod')"></button>
              <button class="card ml-1" style="height: 30px; width: 30px; background-color: silver"
                      (click)="changeColor('silver')"></button>
              <button class="card ml-1" style="height: 30px; width: 30px; background-color: darkslategrey"
                      (click)="changeColor('darkslategrey')"></button>
              <button class="card ml-1" style="height: 30px; width: 30px; background-color: grey"
                      (click)="changeColor('grey')"></button>

                      <img [src]="img" width="100px" height="100px">

Html:

---

您可以使用

作为

HTML

---

演示

您可以使用

HTML

---

演示

即使你可以用.html:

golden

即使你可以用.html:

golden

它可以用thx，如果我有另一款像三星S10这样的产品，并且想要改变S10的图像，我如何操作它取决于手机，知道吗？它可以用thx，如果我有另一款像三星S10这样的产品，并且想要改变S10的图像，我如何根据手机来操作它，你知道吗？

<button class="card" style="height: 30px; width: 30px; background-color: palegoldenrod"
                  (click)="gold()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: silver"
                  (click)="silver()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: darkslategrey"
                  (click)="midnight()"></button>
          <button class="card ml-1" style="height: 30px; width: 30px; background-color: grey"
                  (click)="spacegrey()"></button>

<img [src]="image" />

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  image: any =
    "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTEVY7_oYz24UXM4Z15YgKhX21F-aTUBm9xR46tLgj2Ox4Mkh_w&usqp=CAU";
  gold() {
    this.image =
      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTMXgK3LAKOoot-wUnzrUFPg2q4A__PbvoxKBE-iJKZOFcRKqsl&usqp=CAU";
  }
  silver() {
    this.image =
      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ1gx9WC3BVjG4KYK1v8b2uBPjpughgJpYrJhIsHxbav8DPAMy-&usqp=CAU";
  }

  midnight() {
    this.image =
      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcR3CIz-oYt40ekYXw7CLGLfePl3B9Y5CWJW8-SZ7AZ9_WqWDSuQ&usqp=CAU";
  }

  spacegrey() {
    this.image =
      "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTuM7Ws8HBB1gyxb_fAmT9_k75SFH4dT2y4UcIll60HtL1F6pJQ&usqp=CAU";
  }
}