javascript - React img onError 事件未触发
问题描述
在我的 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 事件。任何帮助将非常感激。
解决方案
您实际上并没有调用该函数。尝试以下两个选项之一:
onError={this.addDefaultSrc}
或者onError={(e) => this.addDefaultSrc(e)}
推荐阅读
- java - 使用 ScheduledExecutorService 时出现这种奇怪输出的原因是什么?
- asynchronous - prometheus 如何用于测量异步调用的延迟?
- prometheus - Prometheus 基于 Labels 的过滤
- javascript - 有没有办法在异步 JavaScript 函数中模拟浏览器流 SSO 身份验证?
- java - Angular 项目无法在 GIT 命令行中添加 api 文件夹
- google-analytics - Google Analytics - 测试所需的域设置?
- excel - 独立工作的代码片段,缝合在一起时不再工作 - VBA Userform
- android - 如何同时在视图上启动多个 ObjectAnimator?
- json - 使用像 myjson 这样的 JSON 存储和 react redux
- azure - 有时我们需要在故障转移后手动打开加密密钥,有时不需要