Ich habe eine Reaktionskomponente, die die Detailansicht aus einer Liste ist.react.js Ersetzen img src onerror
Ich versuche, das Bild durch ein Standardbild zu ersetzen, wenn das Bild nicht existiert und es einen Fehler 404 gibt.
Ich würde normalerweise die Onerror-Methode im Img-Tag verwenden, aber das scheint nicht zu funktionieren.
Ich bin mir nicht sicher, wie dies mit reagieren soll.
Hier ist meine Komponente:
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;
ich in dieses Problem lief, und ich habe nicht den Code im Moment zu helfen, aber was ich tat, war Ort der Javascript in componentdidmount Überprüfung, Wenn ein Bildfehler auftritt, wird ein Rückruf ausgelöst, der das Bild durch das Standardbild ersetzt. –