Замените img ничем, когда он не существует, используя ReactJS

Question

Я хотел бы заменить несуществующее изображение ничем в моем компоненте реакции. Есть ли способ, которым я мог бы использовать onError, чтобы как-то ничего не поставить на место изображения?

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

В качестве альтернативы, я мог бы использовать jquery для обнаружения изображения, и, если оно не найдено, я просто return null на своей функции render. Но как бы то ни было, я тоже не могу заставить это работать. Вот как выглядит моя функция:

  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

Вы можете скрыть изображение с помощью CSS display: none и показать его onload:

class NonEmptyImage extends React.Component {
  state = {
    visible: false
  }
  
  handleLoad = _ => this.setState({ visible: true });
  
  render() {
    const { src } = this.props;
    const { visible } = this.state;
    return (
      <img
        src={src}
        onLoad={this.handleLoad}
        style={{ display: visible ? 'initial' : 'none' }}
      />
    )
  }
}

ReactDOM.render(<NonEmptyImage src='https://upload.wikimedia.org/wikipedia/en/thumb/4/4d/SpongeBob_SquarePants_characters_cast.png/300px-SpongeBob_SquarePants_characters_cast.png'/>, document.querySelector("#fw33f4w5"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="fw33f4w5"></div>

Измените src на что-то случайное, и вы ничего не увидите.

Если вы ненавидите классы, вот рабочий пример с функцией:

function NonEmptyImage({ src }) {
  let ref;

  return (
    <img
      ref={el => ref = el}
      src={src}
      onLoad={_ => ref.style.display = 'initial'}
      style={{ display: 'none' }}
    />
  )
}

ReactDOM.render(<NonEmptyImage src='https://upload.wikimedia.org/wikipedia/en/thumb/4/4d/SpongeBob_SquarePants_characters_cast.png/300px-SpongeBob_SquarePants_characters_cast.png' />, document.querySelector("#fw33f4w5ert"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="fw33f4w5ert"></div>

Answer 2

В обоих случаях необходимо использовать компонент 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 }/>}
  )
}