Question

我将多个图片名称与服务器位置添加为路径this.Images.push(img);至private images: any[] = [];，以显示在.html中：

  <ion-card *ngFor="let i of images">              
    <img [src]="i"/>
  </ion-card>

如何在图像的角落添加带图标的删除按钮？

Answer 1

HTML：

<div class="outer">
  <ion-card class="inner" *ngFor="let i of images">
    <img [src]="i"/>
    <span class="close-icon">X</span>
  </ion-card>
</div>

在deleteImage（i）方法中编写逻辑以删除适合您目的的图像。您可以应用css将X图标放在顶角。

的CSS：

.close-icon {
  position: absolute;
  right: 5px;
  margin-top: 5px;
  color: #fff;
  font-size: 12px;
 }

.inner {
  position: relative;
  background: #ccc;
  height: 40px;
  width: 100%;
  margin: 5px;
}

.outer {
  height: 90px;
  width: 100px;
}

如果您没有使用字体真棒，请使用以下内容 <span class="close-icon" (click)="deleteImage(i)">X</span>

在多张图片上添加删除按钮

1 个答案: