基于布尔值动态改变图像源答案

【问题标题】：Dynamically change image source based on boolean value基于布尔值动态改变图像源
【发布时间】：2023-04-05 19:13:01
【问题描述】：

我有一个 API 调用，它检索如下所示的对象数组 {id: 12313, isComplete: true}

   changeImage(isComplete: string) {
    let image = document.getElementById("icon-status") as HTMLImageElement    
    if(isComplete) {
      return image.src = '../ClientApp/images/Green.png'
    }
    return image.src = "../ClientApp/images/Grey.png";
  }

如果 isComplete = true 则基本设置 image.src = "green"，否则设置 image.src = "grey"

我的 HTML 看起来像这样 <img src={this.changeImage(task.isComplete)} width="22" alt="" className="icon" id="icon-status"/>

目前我收到 TypeError: Cannot set property 'src' of null..

有什么想法吗？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

您可以使用task.isComplete 和三元运算符来为img 元素提供正确的src，而不是尝试在DOM 中操作img 元素。

<img
  src={
    task.isComplete
      ? "../ClientApp/images/Green.png"
      : "../ClientApp/images/Grey.png"
  }
  width="22"
  alt=""
  className="icon"
  id="icon-status"
/>

【讨论】：

【解决方案2】：

  const [image, setImage] = useState()
 
 useEffect(() => {
    if (isComplete) {
      setImage(require('../ClientApp/images/Green.png'))
    } else {
      setImage(require('../ClientApp/images/Gray.png')
    }
  }, [image])

<img
  src={image}
  width="22"
  alt=""
  className="icon"
  id="icon-status"
/>

【讨论】：

依赖列表中不是[image]，不应该是[isComplete]吗？