html - 在某些情况下不显示离子图标

Question

我正在尝试为我的照片库应用程序中的每个图像添加一个心脏离子图标。这最终将允许用户喜欢该图像。正如您从下面的第一张图片中看到的那样，除了两个之外，每张图片都添加了心形图标，我不知道为什么？

同样在下面的第二张图片中，您可以看到心脏被添加到没有任何图像的页面中。我也能理解为什么会这样？

这是将图标添加到 html 代码的位置：

<a style="cursor: pointer">
    <div class="list-group-item">
        <div class="like-icon-container">
            <ion-icon class="like-icon" name="heart"></ion-icon>
        </div>
        <img [src]="image.imagePath" alt="Praying to the Sun" [ngStyle]="{'height': image.heightSize, 'width': image.widthSize}" class="image-item">
    </div>
</a>

我正在使用 Angular，所以这是添加组件选择器的地方：

<ul class="container">
    <li class="item-list-container oneSec">
        <app-image-item
          *ngFor="let imageEl of galleryList"
          [image]="imageEl"
          (click)="onImageSelect(imageEl.id)">
        </app-image-item>
    </li>
</ul>

这是相关的CSS代码：

.like-icon {
    color: red;
    position: absolute;
}