html - 在某些情况下不显示离子图标
问题描述
我正在尝试为我的照片库应用程序中的每个图像添加一个心脏离子图标。这最终将允许用户喜欢该图像。正如您从下面的第一张图片中看到的那样,除了两个之外,每张图片都添加了心形图标,我不知道为什么?
同样在下面的第二张图片中,您可以看到心脏被添加到没有任何图像的页面中。我也能理解为什么会这样?
这是将图标添加到 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;
}
解决方案
推荐阅读
- python - BigQuery DataTransfer:StartManualTransferRunsRequest 的构造函数输入无效
- ibm-cloud - 更新 watsonplatform.net 端点以进行情绪分析,得到 404
- python - 带有网站 API 的 Python 电报价格机器人
- c# - System.InvalidOperationException:没有路由与提供的值匹配
- agora.io - Web RTC 的“unmute-audio”回调未触发
- python - 在传递可选参数时获取所有日志事件
- javascript - 使用 node.js 获取服务器 url
- r - R中特定行与前一行之间的滞后差异
- python-requests - jupyterlab:在笔记本中打开 HTML(使用远程连接)
- netsuite - 使用 Emp Center 角色的 Vendor Bill Approval 拒绝原因