如何在图片渲染前获取宽高？isVisible为false时的实现方案

你的问题核心是：当isVisible为false时，<Image>组件根本没挂载到DOM中，所以imageRef.current是undefined，自然拿不到宽高值。下面提供两种可行方案：

方案1：用原生Image API预加载图片（推荐） #

直接通过浏览器的原生Image对象加载图片，获取它的原始宽高并存在组件状态里，不管<Image>是否渲染都能拿到值。

代码示例：

import { useState, useEffect } from 'react';
import { Image, Box } from '@mui/material';

function YourComponent({ url, isVisible }) {
  const [imgSize, setImgSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (!url) return;
    
    const img = new Image();
    // 若图片来自外部域名，需设置跨域
    // img.crossOrigin = 'anonymous';
    img.src = url;
    
    img.onload = () => {
      // 获取图片原始宽高
      setImgSize({
        width: img.naturalWidth,
        height: img.naturalHeight
      });
    };

    // 处理图片加载失败的情况
    img.onerror = () => {
      setImgSize({ width: 200, height: 200 }); // 设置默认宽高
    };

    // 清理函数，避免内存泄漏
    return () => {
      img.onload = null;
      img.onerror = null;
    };
  }, [url]);

  return (
    <>
      {isVisible ? (
        <Image src={url} fit="contain" />
      ) : (
        <Box sx={{ height: imgSize.height, width: imgSize.width }}></Box>
      )}
    </>
  );
}

这种方法的优势是：不需要额外渲染DOM元素，直接拿到图片的原始尺寸，不受组件样式影响。

方案2：隐藏渲染图片（而非不渲染） #

让<Image>组件始终挂载，只是用样式隐藏它，这样ref就能获取到渲染后的宽高。适合需要拿到图片经过fit="contain"处理后实际渲染尺寸的场景。

代码示例：

import { useState, useEffect, useRef } from 'react';
import { Image, Box } from '@mui/material';

function YourComponent({ url, isVisible }) {
  const imageRef = useRef(null);
  const [imgSize, setImgSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (imageRef.current) {
      setImgSize({
        width: imageRef.current.offsetWidth,
        height: imageRef.current.offsetHeight
      });
    }
  }, [imageRef.current, isVisible]);

  return (
    <>
      <Image
        ref={imageRef}
        src={url}
        fit="contain"
        sx={{
          visibility: isVisible ? 'visible' : 'hidden',
          position: 'absolute',
          left: '-9999px',
          pointerEvents: 'none', // 避免干扰页面交互
        }}
      />
      {!isVisible && (
        <Box sx={{ height: imgSize.height, width: imgSize.width }}></Box>
      )}
    </>
  );
}

注意：这种方法会始终加载图片，和预加载效果类似，但会在DOM中保留一个隐藏元素，适合需要匹配<Image>组件实际渲染尺寸的场景。

内容的提问来源于stack exchange，提问作者wanghq