如何在ReactJS中检测API图片是否加载完成并获取高度

你的现有代码存在几个问题：

1. 组件初始化渲染时，myImg元素还没挂载到DOM，document.getElementById("myImg")会返回null，直接访问complete属性会报错。
2. 在组件函数体直接调用setImgHeight，会导致每次渲染都触发状态更新，进而引发无限重渲染。
3. 没有监听图片的加载事件，仅靠一次判断无法捕获图片加载完成的时机。

核心思路 #

利用React的useRef获取图片DOM引用，通过图片的onLoad事件监听加载完成的时机，此时再安全获取图片高度。

基础实现代码 #

import { useState, useRef } from 'react';

export const App = () => {
  const [imgHeight, setImgHeight] = useState('未加载');
  // 用useRef获取图片DOM节点
  const imgRef = useRef(null);

  // 图片加载完成时触发的回调
  const handleImageLoad = () => {
    if (imgRef.current) {
      // 获取渲染后的高度（适配容器后的高度）
      const renderedHeight = imgRef.current.getBoundingClientRect().height;
      // 也可以获取图片原始高度
      const naturalHeight = imgRef.current.naturalHeight;
      setImgHeight(`渲染高度：${renderedHeight}px，原始高度：${naturalHeight}px`);
    }
  };

  // 处理图片加载失败的情况
  const handleImageError = () => {
    setImgHeight('图片加载失败');
  };

  return (
    <div>
      <img
        ref={imgRef}
        src="你的API返回图片URL"
        onLoad={handleImageLoad}
        onError={handleImageError}
        alt="目标图片"
      />
      <p>图片高度：{imgHeight}</p>
    </div>
  );
};

从API动态获取图片URL的场景 #

如果图片URL是通过API请求获取的，需要先拿到URL再渲染图片，结合useEffect实现：

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

export const App = () => {
  const [imgUrl, setImgUrl] = useState('');
  const [imgHeight, setImgHeight] = useState('未加载');
  const imgRef = useRef(null);

  // 模拟从API获取图片URL
  useEffect(() => {
    const fetchImage = async () => {
      const res = await fetch('你的API接口地址');
      const data = await res.json();
      setImgUrl(data.imageUrl); // 假设API返回的图片地址字段为imageUrl
    };
    fetchImage();
  }, []);

  const handleImageLoad = () => {
    if (imgRef.current) {
      const height = imgRef.current.getBoundingClientRect().height;
      setImgHeight(`渲染高度：${height}px`);
    }
  };

  const handleImageError = () => {
    setImgHeight('图片加载失败');
  };

  return (
    <div>
      {imgUrl ? (
        <img
          ref={imgRef}
          src={imgUrl}
          onLoad={handleImageLoad}
          onError={handleImageError}
          alt="API获取的图片"
        />
      ) : (
        <p>正在获取图片...</p>
      )}
      <p>图片高度：{imgHeight}</p>
    </div>
  );
};

关键说明 #

• useRef：React中获取DOM元素的标准方式，避免直接使用document.getElementById，更符合组件化的状态管理逻辑。
• onLoad事件：图片完全加载（包括解码完成）后才会触发，是检测图片加载完成最可靠的方式。
• 避免无限重渲染：不要在组件函数体直接调用setState，所有状态更新逻辑都应放在事件回调或useEffect中。

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