时间戳

首页 > 解决方案 > 基于布尔值动态改变图像源

reactjs - 基于布尔值动态改变图像源

问题描述

我有一个 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..

有任何想法吗？

标签： reactjstypescript

解决方案

您可以使用task.isComplete三元运算符来为 img 元素提供正确的src.

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

推荐阅读