React项目中ReactCrop组件无法正常显示图片问题求助

问题原因 #

你的代码中存在一个拼写错误：ReactCrop组件的onImageLoded属性拼写错误，正确名称应为onImageLoaded。这个属性负责监听图片加载完成的事件，拼写错误会导致组件无法正确处理图片加载流程，最终只显示文件名而非图片本身。

修复步骤 #

1. 修正属性拼写：将onImageLoded改为onImageLoaded，确保ReactCrop能正确捕获图片加载完成的事件，从而渲染图片内容。
2. 添加内存泄漏防护：使用URL.createObjectURL生成的对象URL需要手动释放，避免内存泄漏。可以通过useEffect在组件卸载或图片更换时清理旧的URL。

修复后的完整代码 #

import React, { useState, useEffect } from "react";
import ReactCrop from "react-image-crop";
import "react-image-crop/dist/ReactCrop.css";

export const Imagecrop = () => {
  const [src, setSrc] = useState(null);
  const [image, setImage] = useState(null);
  const [crop, setCrop] = useState({ aspect: 16 / 9 });

  const handleFileChange = (e) => {
    if (src) {
      // 更换图片时清理旧的Object URL
      URL.revokeObjectURL(src);
    }
    const file = e.target.files[0];
    if (file) {
      setSrc(URL.createObjectURL(file));
    }
  };

  // 组件卸载时清理Object URL
  useEffect(() => {
    return () => {
      if (src) {
        URL.revokeObjectURL(src);
      }
    };
  }, [src]);

  return (
    <div className="container">
      <div className="row">
        <div className="col-6">
          <input type="file" accept="image/*" onChange={handleFileChange} />
        </div>
        <div className="col-6">
          {src && (
            <ReactCrop
              src={src}
              onImageLoaded={setImage}
              crop={crop}
              onChange={setCrop}
            />
          )}
        </div>
      </div>
    </div>
  );
};

补充说明 #

• 修正拼写后，ReactCrop会在图片加载完成后触发onImageLoaded回调，将图片实例存入image状态，组件就能正常渲染图片并提供裁剪功能。
• 清理Object URL是使用该API的标准操作，防止长时间运行后内存占用过高。

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