react.js Remplacer img src onerror

J'ai une réagir la composante qui est la vue de détail à partir d'une liste.

Je suis en train de remplacer l'image par une image par défaut si l'image n'existe pas et il y a une erreur 404.

Je voudrais l'utiliser normalement le onerror méthode dans la balise img, mais qui ne semble pas être travail.

Je ne suis pas sûr de la façon de le faire avec de réagir.

Voici mon composant:

import React from 'react';
import {Link} from 'react-router';
import ContactStore from '../stores/ContactStore'
import ContactActions from '../actions/ContactActions';

class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = ContactStore.getState();
    this.onChange = this.onChange.bind(this); 
 }

componentDidMount() {
  ContactStore.listen(this.onChange);
  ContactActions.getContact(this.props.params.id);
}

componentWillUnmount() {
  ContactStore.unlisten(this.onChange);
}

componentDidUpdate(prevProps) {
  if (prevProps.params.id !== this.props.params.id) {
    ContactActions.getContact(this.props.params.id);
  }
}

onChange(state) {
  this.setState(state);
}

render() {
  return (
    <div className='container'>
      <div className='list-group'>
        <div className='list-group-item animated fadeIn'>
          <h4>{this.state.contact.displayname}</h4>
          <img src={this.state.imageUrl} />
        </div>
      </div>
    </div>
  );
}
}

export default Contact;
J'ai rencontré ce problème, et je n'ai pas le code pour l'aider à ce moment, mais ce que j'ai fait a été de placer le javascript de vérification dans componentdidmount, qui cherche une image d'erreur, s'ils se produisent, un rappel de feu qui remplace celui de l'image avec l'image par défaut.
S'il vous plaît, accepter la réponse par Georgii Oleinikov, car actuellement le mieux marqué réponse peut produire éternelle boucle et n'est donc pas bon du tout.
Trouvé cette vidéo tutoriel sur la ce - youtu.être/90P1_xCaim4 qui m'a effectivement aidé de construction à part entière un composant de l'image pour mon application. J'ai aussi trouvé ceci avec un impressionnant précharge pour mon composant de l'image - youtu.être/GBHBjv6xfY4. En combinant les deux, vous pouvez fournir un merveilleux UX pour les utilisateurs.

OriginalL'auteur Joel Lawler | 2015-12-04