React img onError 事件未触发答案

【问题标题】：React img onError event not triggeredReact img onError 事件未触发
【发布时间】：2019-07-25 13:25:58
【问题描述】：

在我的 create-react-app 中，我有显示服务器端图像的卡片，我想在没有返回服务器端图像时使用虚拟图像。似乎永远不会触发“onError”事件。这是我的代码：

import React from 'react';
import notfound from '../../icons/notfound.png';

class Card extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        open: false
    }
}

addDefaultSrc(ev){
    ev.target.src = {notfound};
    ev.target.onerror = null;
}

render(){
    return (
        <div>
           <div><img className="item-photo" onError={() => this.addDefaultSrc} src={url} alt=""></img>
           </div>
        </div>
    );
}

和卡片列表

    return (
         <Card
             key={i}
             id={item.No}
             url={`http://***.***.*.*:3000/${item.No}.JPG`} 
         />

虽然我在没有要显示的图像时收到 404 错误（未找到），但不会触发 onError 事件。任何帮助将不胜感激。

【问题讨论】：

最好将addDefaultSrc定义为箭头函数。然后你可以通过它而不绑定：onError={this.addDefaultSrc}

标签： javascript reactjs onerror

【解决方案1】：

您实际上并没有调用该函数。尝试以下两个选项之一：

onError={this.addDefaultSrc} 或 onError={(e) => this.addDefaultSrc(e)}

【讨论】：

第二个选项不起作用，因为它丢失了事件参数。