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

问题

I'm using the stateless functional component to add spinner while image is loading from the external resource, like so:

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 />
}

And use it like so:

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

Why would the onLoad never get called?

回答1:

When image is not loaded you aren't actually rendering the image. You need to render it for its onLoad to fire

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 /> }
    </>
  )
}

回答2:

Your condition in return statement prevent rendering image, so it will be never loaded.

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 />}
    </>
  )
}

Also, remember to use useCallback hook to memoize your onLoad function:

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 />}
    </>
  )
}

来源：https://stackoverflow.com/questions/57162865/react-onload-event-on-image-tag-is-not-getting-called-when-using-conditional-ren