I create a Image component

class Image extends React.Component {
  render() {
    return (
      <img src= { this.state.imgUrl } onError ={ this.onError() }/>
    );
  }
  onError(){
      console.log('Image onError');
        this.setState(
      { imgUrl: '../default.png' }
    );
  }
}

and use it in my view but if one Image not found. all Image Component In view onError

I create a Image component

class Image extends React.Component {
  render() {
    return (
      <img src= { this.state.imgUrl } onError ={ this.onError() }/>
    );
  }
  onError(){
      console.log('Image onError');
        this.setState(
      { imgUrl: '../default.png' }
    );
  }
}

and use it in my view but if one Image not found. all Image Component In view onError

• javascript
• image
• reactjs

3 Answers 3

Remember, if you want to change the styles of the element and/or change the img source, just do something like this:

<img
  src={'original src url goes here'}
  alt="example"
  onError={(e) => {
     e.target.src = '/example/noimage.png' // some replacement image
     e.target.style = 'padding: 8px; margin: 16px' // inline styles in html format
  }}
/>

Hope it helps!

You have onError={this.onError()} with instant function call. It should be either onError={this.onError.bind(this)} or onError={() => this.onError()}.

As React versions are updated, we recommend using the following code.

<img
  src={'original src url goes here'}
  alt="example"
  onError={(e) => {
     e.currentTarget.src = '/example/noimage.png' // some replacement image
  }}
/>