如何为上角的上传图像添加删除图标答案

【问题标题】：How to add Remove icon for upload image of top corner如何为上角的上传图像添加删除图标
【发布时间】：2021-08-28 08:56:36
【问题描述】：

  <div *ngFor="let selected of base64textString;let index = index">
      <img [src]="selected.imageString" style="height: 100px; width:100px;">
      <i class="ft-trash-2 danger cursor-pointer" (click)="delete(item)"></i>
    </div>

如何添加删除右上角的上传图片图标。我无法正确放置..请您建议正确对齐图标吗？

【问题讨论】：

标签： html css angular bootstrap-4

【解决方案1】：

你可以试试这个：

.div-image{
  position: relative;
}

.div-icon{
  position: absolute;
  right: 10px;
  top: 10px;
}

 <div class="div-image" *ngFor="let selected of base64textString;let index = index">
      <img [src]="selected.imageString" style="height: 100px; width:100px;">
      <i class="ft-trash-2 danger cursor-pointer div-icon" (click)="delete(item)"></i>
    </div>

首先需要在父div中设置position:relative，因为它会决定div-icon会尊重谁。因此，在这种形式中，div-icon 将获取 div-image 位置以将其自身定位在此 div 内。

【讨论】：

【解决方案2】：

你可以通过使用 Flexbox 来解决这个问题，试试这个

.div-image{
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}
.div> i{
    align-self: flex-end;
    font-size:1rem;
}

<div
      class="div-image"
      *ngFor="let selected of base64textString;let index = index"
    >
      <i
        class="ft-trash-2 danger cursor-pointer div-icon"
        (click)="delete(item)"
      ></i>
      <img [src]="selected.imageString" style="height: 100px; width: 100px" />
    </div>

【讨论】：