使用条件渲染时，不会调用图像标签上的 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 /> }
    </>
  )
}

Answer 2

您在 return 语句中的条件阻止渲染图像，因此永远不会加载它。

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  function onLoad() {
    console.log('loaded');
    setLoaded(true);
  }

  return (
    <>
      <img 
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
      /> 
      {!loaded && <Spin />}
    </>
  )
}

另外，记得使用 useCallback 钩子来记住你的 onLoad 函数：

function ExternalImage(props) {
  const [loaded, setLoaded] = useState(false);
  const onLoad = useCallback(() => {
    console.log('loaded');
    setLoaded(true);
  }, [])

  return (
    <>
      <img 
        onLoad={onLoad}
        src={props.src}
        alt={props.alt}
        {...props} 
      /> 
      {!loaded && <Spin />}
    </>
  )
}

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

React onLoad event on image tag is not getting called when using conditional render

reactjs

image

onload

react-hooks