如何使用react-lazyload或react-lazy-load而不设置高度道具？

import LazyLoad from 'react-lazyload';

const MyComponent = ({ imageUrl }) => (
  <LazyLoad height={200} once>
    <img src={imageUrl} alt="Lazy loaded image" />
  </LazyLoad>
);

import LazyLoad from 'react-lazyload';
import './MyComponent.css';

const MyComponent = ({ imageUrl }) => (
  <div className="lazy-load-container">
    <LazyLoad once>
      <img src={imageUrl} alt="Lazy loaded image" className="lazy-load-image" />
    </LazyLoad>
  </div>
);

.lazy-load-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
}

.lazy-load-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

import React, { useEffect, useRef } from 'react';

const LazyLoadImage = ({ imageUrl }) => {
  const imgRef = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = imageUrl;
          observer.unobserve(img);
        }
      });
    });

    if (imgRef.current) {
      observer.observe(imgRef.current);
    }

    return () => {
      if (imgRef.current) {
        observer.unobserve(imgRef.current);
      }
    };
  }, [imageUrl]);

  return <img ref={imgRef} alt="Lazy loaded image" />;
};

export default LazyLoadImage;