react.js替换img src onerror

这对我来说效果最好

{e.target.onerror = null; e.target.src="image_path_here"}}/>

您可以使用不受控制的组件:

 this.img = img} onError={
    () => this.img.src = 'img/default.img'
}>

您只需定义onError处理程序,而不是更改将触发组件呈现方法的状态,最终组件将使用占位符重新呈现.

请不要一起使用jQuery和React!

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 (
    

      

        

          
{this.state.contact.displayname}
          
        
      
    
  );
}

export default Contact;

由于没有完美的答案，因此我发布了我使用的代码段。我正在使用Image回退到的可重用组件fallbackSrc。

由于后备图片可能再次失败并触发无限次重新渲染循环，因此我添加了errored状态。

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Image extends Component {
  constructor(props) {
    super(props);

    this.state = {
      src: props.src,
      errored: false,
    };
  }

  onError = () => {
    if (!this.state.errored) {
      this.setState({
        src: this.props.fallbackSrc,
        errored: true,
      });
    }
  }

  render() {
    const { src } = this.state;
    const {
      src: _1,
      fallbackSrc: _2,
      ...props
    } = this.props;

    return (
      
    );
  }
}

Image.propTypes = {
  src: PropTypes.string,
  fallbackSrc: PropTypes.string,
};

constructor(props) {
    super(props);
    this.state = {
      imageLoadError: true,
    };
}

 { 
        if(this.state.imageLoadError) { 
            this.setState({
                imageLoadError: false
            });
            e.target.src = 'fallbackImage.png';
        }
    }}
/>