使用条件渲染时不会调用图像标签上的 React onLoad 事件

Question

我正在使用无状态功能组件在从外部资源加载图像时添加微调器，如下所示：

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  function onLoad() {
    console.log('loaded');
    setLoaded(true);
  }
  return loaded
     ? <img 
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
       /> 
     : <Spin />
}

并像这样使用它：

<ExternalImage src={image.src} alt={image.alt} className="image" />

为什么onLoad永远不会被调用？

Answer 1

未加载图像时，您实际上并未渲染图像。您需要渲染它以使其 onLoad 触发

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  function onLoad() {
    console.log('loaded');
    setLoaded(true);
  }
  return (
    <>
        <img 
        style={{display: loaded? 'block': 'none'}}
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
       /> 
       {!loaded && <Spin /> }
    </>
  )
}