按钮内心形图标点击后隐藏问题求助（附代码片段）

看起来你遇到的核心问题是：默认的空心心形图标正常显示，但点击切换成填充心形后，图标就看不见了，只有给图标加背景色才能显示；之前还出现过默认图标隐藏、加背景才可见的情况。结合你给出的代码片段，我整理了几个常见的排查方向和解决办法：

一、先检查图片路径是否正确 #

你代码里写的../../img/filledHeart.png这个相对路径很可能出问题了。很多时候图标不显示都是路径层级算错了：

• 打开浏览器的开发者工具（F12），切换到「Network」标签，点击按钮触发切换，看看这个图片的请求状态是不是404。如果是，说明路径不对。
• 可以试试换成绝对路径（比如从项目根目录开始的/img/filledHeart.png），或者确认当前页面/组件所在的文件夹层级，重新计算相对路径是否正确。

二、排查图片本身的颜色与背景冲突 #

填充心形的图片是不是和按钮背景色一样？比如按钮是白色，填充心形也是白色，那自然会“隐身”，只有加了不同的背景色才显出来：

• 直接打开filledHeart.png文件看看，确认图标颜色和按钮背景色是否重合。
• 如果确实是颜色问题，要么换一张颜色对比明显的图片，要么给图标加个样式调整颜色，比如：

document.getElementById('heartImage').style.filter = 'invert(1)'; // 反转颜色，适合白色图标在白背景的情况

三、检查样式中的隐藏属性 #

你代码里用了document.getElementById('heartImage').style.visibility = ''，这个是把visibility重置为默认，但可能之前的样式给这个图标设置了隐藏属性：

• 试试直接设置visibility: visible，或者换成display: block/inline-block，有时候visibility的优先级或者继承规则会导致不生效。
• 另外，检查有没有CSS类给这个图标设置了opacity: 0、position: absolute且偏移出可视区域，或者其他隐藏样式。

四、避免DOM元素获取的冲突 #

你用getElementById('heartImage')获取元素，要确保页面上这个ID是唯一的：

• 如果页面上有多个相同ID的元素，获取到的可能不是你要操作的那个，导致修改不生效。
• 既然你用了React（从this.emptyHeart能看出来），更推荐用ref来获取元素，比getElementById更可靠：

// 在render里的img标签上添加ref
<img ref={(el) => this.heartImg = el} id="heartImage" src="../../img/emptyHeart.png" />

// 在changeHeart里直接操作ref
changeHeart = () => {
  this.emptyHeart = !this.emptyHeart;
  this.heartImg.src = this.emptyHeart ? '../../img/emptyHeart.png' : '../../img/filledHeart.png';
  this.heartImg.style.visibility = 'visible';
}

五、确保React状态更新正确 #

你直接修改this.emptyHeart = false的方式不太对，React里状态更新应该用setState，否则组件不会重新渲染，可能导致DOM操作和状态不同步：

constructor(props) {
  super(props);
  this.state = {
    emptyHeart: true
  };
}

changeHeart = () => {
  this.setState(prevState => ({
    emptyHeart: !prevState.emptyHeart
  }), () => {
    // 在setState的回调里操作DOM，确保状态更新完成后再修改
    const imgSrc = this.state.emptyHeart ? '../../img/emptyHeart.png' : '../../img/filledHeart.png';
    this.heartImg.src = imgSrc;
    this.heartImg.style.visibility = 'visible';
  });
}

你可以按照上面的顺序逐一排查，大概率能解决问题~

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