jquery - 当 img 不存在时使用 ReactJS 将其替换为空

Question

我想用我的 react 组件中的任何内容替换不存在的图像。有没有办法使用 onError 以某种方式在图像的位置放置任何内容？

render() {
  return (
    <img src={myImage} onError={(e)=>{/*Do something to replace the image with nothing*/}}/>
  )
}

或者，我可以使用 jquery 来检测图像，如果没有找到图像，我只需在 render 函数上返回 null 即可。但就目前情况而言，我也无法做到这一点。这就是我的函数当前的样子:

  checkIfImageExists () {
    return $.get(myImage)
      .done(() => console.warn('found it!', myImage))
      .fail(() => console.warn('didnt fin it!', myImage))
  }

render() {
      console.warn(this.checkIfImageExists())
    if (!this.checkIfImageExists().status) {
      return null
    }
  return (
    <img src={myImage}/>
  )
}

这些的问题是永远找不到它。我的代码有什么问题吗？如何修复它，以便在找不到图像时不渲染任何内容？

Answer 1

这两种情况都需要使用组件state来异步处理图像:

state = { imgSrc: myImage } // depends on where myImage comes from

onImageError = () => {
  this.setState({ imgSrc: null })
}

render() {
  return (
    {this.state.imgSrc && <img src={this.state.imgSrc} onError={this.onImageError }/>}
  )
}