Html 如何在angular6中为循环动态更改内部图像？

我的html代码：

          <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-4 col-lg-12">
           <ng-container *ngFor="let horizontal of categories">
            <ng-container *ngFor="let horizontalval of horizontal.items;let i=index">
          <button [ngClass]="{'selected-color' : i==selectedIndex}" type="submit" class="btn1" [id]="horizontal.items[i].title" (click)="changeTrans(horizontal.items[i].title);changeColor(i)"> 
            <img [src]= horizontal.items[i].icon alt="image not found" class="icon"/>
            {{ horizontal.items[i].title }}
          </button>
        </ng-container>
      </ng-container></div>
      </div>

我的css：

.selected-color{
 background-color: orange;
 color:white;
// background-image: url('./../../../../../assets/Trans_1.png');
}

因此，在这里我可以更改所选按钮的颜色，但我还需要为不同的值更改不同的图像。在这里，如何为每个按钮id动态更改图像

基本上我想知道的是，如何为每个按钮动态更改图像，这些按钮将通过for显示。有人能给我一些建议来实现它吗？

替换下面的代码

<ng-container *ngFor="let horizontalval of horizontal.items;let i=index">

编辑

---

谢谢你的回复。我可以看到按钮在加载时的图像。我想要的是点击一次按钮，我需要为每个按钮替换另一个图像。你能告诉我怎么做吗？用

更新了答案，非常感谢。图像在变化，但对于每个按钮，我都会得到相同的图像。（例如，如果我单击第一个按钮，按钮的图像需要更改为aaa，如果我单击第二个按钮，按钮的图像需要更改为bbb）我在编辑部分更新了答案。请检查它是否对你有效。它仍然对我无效。如果有的话，你能给我其他的解决方案吗？请

<ng-container *ngFor="let horizontalval of horizontal.items;let i=index">

<img [attr.src]= "horizontalval.icon" alt="image not found" class="icon"/>

<img [src]= "horizontal.items[selectedIndex].icon" class="icon"/>

    <button [ngClass]="{'selected-color' : horizontal.items[i].selected}" 
      type="submit" class="btn1" [id]="horizontal.items[i].title"
 (click)="changeTrans(horizontal.items[i].title);
         changeColor(horizontal.items[i])">        
       <img [src]= horizontal.items[i].icon alt="image not found" class="icon"/>
                {{ horizontal.items[i].title }}
      </button>

changeColor(item){
  this.item.selected = true;
}