Javascript 使用img onerror作出反应

我创建了一个图像组件

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

类映像扩展React.Component{
render（）{
返回(
);
}
onError（）{
console.log（'Image onError'）；
这是我的国家(
{imgUrl:'../default.png'}
);
}
}

并在我看来使用它

---

但是如果没有找到一个图像。视图中的所有图像组件onError

您有

onError={this.onError（）}

和即时函数调用。它应该是

onError={this.onError.bind（this）}

或

onError={（）=>this.onError（）}

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

{
e、 target.src='/example/noimage.png'//一些替换图像
e、 target.style='padding:8px；margin:16px'//html格式的内联样式
}}
/>

---

希望有帮助

谢谢你的编辑，@FakeRainBrigand。现在语法是正确的。这两种解决方案都不是100%理想的，因为它们将在每个渲染中创建一个全新的函数。首先（在构造函数中）进行绑定，并将绑定函数作为onError属性传递<代码>this.onError=this.onError.bind（this）

onError={this.onError}

是的，这是2,5年前的答案。此后情况发生了变化：）。我现在建议使用胖箭头函数

onError=（）=>{…}

，然后

onError={this.onError}

就足够了，不需要任何额外的绑定glad来帮助@HashirBaig:）