在多个图像上添加删除按钮

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;
}

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