react实现img的onerror
发布时间:2020-12-15 07:14:54 所属栏目:百科 来源:网络整理
导读: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);
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); } onError() { this.setState({ imageUrl: "img/default.png" }) } render() { return ( <div className='container'> <div className='list-group'> <div className='list-group-item animated fadeIn'> <h4>{this.state.contact.displayname}</h4> <img onError={this.onError.bind(this)} src={this.state.imageUrl} /> </div> </div> </div> ); } export default Contact; (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |