Как динамически отображать тег изображения после загрузки

Question

Этот код React работает:

  const img = new Image();
  img.src =
    'https://storage.cloud.google.com/images.eng.ph.com/uploads/images/c4a-1500x500-logo.jpeg';

  img.onload = () => {
    const el = document.getElementById('image-container') as any;
    if (el) {
      while (el && el.lastChild) {
        el.removeChild(el.lastChild);
      }
      el.append(img);
    }
  };

  return (
    <div className="container">
      <div className="main-logo-image-container" id="image-container"></div>
    </div>
   )

Мы устанавливаем CSS для .main-lo go -image-container равными размерам изображения. Но мой вопрос - есть ли способ сделать это с большим HTML и меньшим JS? Примерно так:

  return (
    <div className="container">
       {imageLoaded ? <img onload={setState({imageUploaded:true})} src={imageSrc}/> :
      <div className="main-logo-image-container" id="image-container"></div>}
    </div>
   )

но я не вижу способа сделать это, поскольку у тега <img> нет атрибута onload?