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

Question

我正在开发一个Ionic 3 应用程序，我想要一个button，在图像 旁边有一个small add icon。看起来像这样。

喜欢图片旁边的绿色小图标。

这是我的 html 波纹管，用于显示我所做的图像。

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

和scss

img {
    display: block;
    border-radius: 100px;
    border: 1px solid #fff;
    width: 80px;
    height: 80px;
    margin: 30px auto 0;
    box-shadow: 0px 0px 4px rgba(0,0,0,0.7);
    margin-top: 0px;
}

我的图片下面的结果。

我只想要第一张图片中的绿色小添加图标。

如果有人可以提供帮助，不胜感激 提前致谢。

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>