反应使用 img onerror

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

并在我看来使用它，但如果找不到一张图像。所有 Image Component 查看 onError

Answer 1

请记住，如果您想更改元素的样式和/或更改 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
  }}
/>

希望能帮助到你！