Question

我创建了一个Image组件

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

并在我看来使用它但如果找不到一张图片。所有图像组件在视图中出现错误

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

希望有帮助！

反应使用img onerror

2 个答案: