html - 場合によってはイオン アイコンが表示されない

Question

フォト ギャラリー アプリのすべての画像にハート イオン アイコンを追加しようとしています。これにより、最終的にユーザーは画像を気に入ることができます。下の 1 番目の画像からわかるように、2 つを除くすべての画像にハートのアイコンが追加されていますが、その理由がわかりません。

また、下の 2 番目の画像では、画像のないページにハートが追加されていることがわかります。なぜこれが起こっているのか理解できますか？

アイコンが 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;
}