反应使用img onerror

Question

我创建了一个图像组件

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' }
    );
  }
}

并在我看来使用它，但如果找不到一个图像。视图中的所有图像组件onError

Answer 1

您拥有具有即时函数调用的onError={this.onError()}。它应该是onError={this.onError.bind(this)}或onError={() => this.onError()}。

Answer 2

请记住，如果您想要更改元素的样式和/或更改img源代码，只需执行如下操作：

<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
  }}
/>

希望能帮上忙！