在 React 網格中獲取圖像高度

Question

我在 React 中制作磚石網格畫廊，在加載后和使用網格調整大小之前我無法獲得圖像高度。 我在img上有onLoad處理程序，但我只得到了應該是原始的已經調整大小的圖像高度，用它來計算行跨度的數量。 我知道這可能是純粹的 css 問題，但我不知道如何解決。

這是我的useEffect ：

  useEffect(() => {
    if (imageRef.current && !loading) {
      const height = imageRef.current.clientHeight;
      console.log('height', height);
      const spansCount = Math.ceil(height / 10 + 1);
      setSpansCount(spansCount);
    }
  }, [imageRef.current, loading]);

這是我的render ：

 return (
    <div
      {...rest}
      className={styles.gallery__item}
      style={{ gridRowEnd: `span ${spansCount}` }}
    >
      <img
        src={image.previewURL}
        ref={imageRef}
        className={styles.gallery__img}
        alt={image.tags}
        onLoad={handleLoad}
      />
      <Placeholder
        ref={loaderRef}
        style={loading ? { display: 'block' } : { display: 'none' }}
      />
    </div>

這是我的非工作Codesandbox 。

這里是使用react-load-image package工作的Codesandbox ，但我不確定為什么這是有效的，而第一個無效。

Answer 1

我只需要在圖像上更改此 css：

.gallery__img {
  width: 100%;
  height: auto; // not 100%
}