离子如何在图像旁边添加按钮

Question

我正在开发 Ionic 3应用，并且我希望在{strong>图片旁边有一个button的{​​{1}}。看起来像这样。

就像图片旁边的绿色小添加图标。

这是我 html 下面的图片。

small add icon

和 scss

<ion-col col-4>
    <img [src]="image" [hidden]="!image">
    <img src="assets/imgs/avatar-placeholder.png" [hidden]="image">
  </ion-col>

下面的图像结果。

我只希望绿色的小添加图标，如第一张图片所示。

感谢某人是否可以提供帮助 预先感谢。

Answer 1

在图标上使用position: absolute。

  

绝对定位元素是其计算的位置值是绝对值或固定值的元素。

div {
  position: relative;
  width: fit-content;
}

div > .icon {
  position: absolute;
  right: 12px;
  bottom: 20px;
  width: 50px;
}

<div>
  <img src="https://www.esparkinfo.com/wp-content/uploads/2016/08/default-avatar.png" alt="">
  <img class="icon" src="https://findicons.com/files/icons/985/affel/128/add.png" alt="">
</div>