如何在API获取的图片上添加心形图标并实现收藏功能

要把心形图标固定在图片右下角，核心是利用相对定位+绝对定位的布局组合，具体实现如下：

1. 调整容器与图标的CSS样式 #

给图片所在的.col-sm容器设置相对定位，让心形图标能基于这个容器进行绝对定位；再给.heart-icon设置绝对定位并调整位置参数：

.col-sm {
  position: relative;
  /* 可选：限制容器宽度，避免图片溢出 */
  max-width: 300px;
  margin-bottom: 1rem;
}

.col-sm img {
  width: 100%;
  display: block; /* 消除图片下方的默认空白 */
}

.heart-icon {
  position: absolute;
  bottom: 10px; /* 距离底部的间距 */
  right: 10px; /* 距离右侧的间距 */
  font-size: 24px; /* 根据需求调整图标大小 */
  cursor: pointer; /* 添加鼠标指针提示，提升交互感 */
  z-index: 10; /* 确保图标在图片上方显示 */
}

2. 优化后的React代码 #

你的JSX部分无需大改，补充key属性以符合React渲染规范即可：

<div className="container3">
  {imageUrls && imageUrls.map((record, index) => (
    <div className="col-sm" key={index}>
      <img src={record} alt="dog" />
      <FontAwesomeIcon 
        icon={faHeart} 
        className='heart-icon' 
        style={{color: "#ff0000"}} 
      />
    </div>
  ))}
</div>

额外提示 #

• 如果需要区分“已收藏”和“未收藏”状态，可以给.heart-icon添加不同类名（比如.heart-icon.active），通过CSS切换颜色或填充样式。
• 调整bottom和right的数值，可适配不同尺寸图片，修改心形图标的具体位置。

内容的提问来源于stack exchange，提问作者Akash Anand