如何为react-dropzone(useDropzone)设置默认图片初始值？

以下是可直接运行的完整实现代码：

import { useDropzone } from 'react-dropzone';
import { useState, useEffect } from 'react';

function ImageDropzone() {
  // 初始化默认图片，直接填入你需要的默认URL即可
  const [currentImage, setCurrentImage] = useState('https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg');
  const [previewUrl, setPreviewUrl] = useState(null);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    accept: {
      'image/*': []
    },
    maxFiles: 1,
    onDrop: (acceptedFiles) => {
      if (acceptedFiles.length > 0) {
        // 生成用户上传文件的本地预览地址，覆盖默认图
        const uploadedFile = acceptedFiles[0];
        const preview = URL.createObjectURL(uploadedFile);
        setPreviewUrl(preview);
        setCurrentImage(preview);
        // 此处可添加你的文件上传到后端服务器的逻辑，上传完成后可替换为后端返回的线上图片地址
      }
    }
  });

  // 组件卸载时释放临时预览资源，避免内存泄漏
  useEffect(() => {
    return () => {
      if (previewUrl) URL.revokeObjectURL(previewUrl);
    }
  }, [previewUrl]);

  return (
    <div {...getRootProps({ style: { width: 300, height: 300, border: '2px dashed #ccc', borderRadius: 8, cursor: 'pointer' } })}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>拖放图片到此处替换</p> :
          <img 
            src={currentImage} 
            alt="预览图" 
            style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8 }}
          />
      }
    </div>
  );
}

export default ImageDropzone;

核心功能说明 #

• 初始化默认值：useState的初始参数直接传入指定的图片URL即可实现默认图加载，无需额外适配网络资源
• 覆盖逻辑：用户上传/拖入图片后，通过URL.createObjectURL()生成本地临时预览地址替换state中的默认值，即可完成覆盖，不会修改原始默认URL配置
• 拓展支持：如果需要持久化替换默认图，可在用户上传成功后将新的图片URL存储到本地缓存/后端，下次初始化时优先读取存储的地址即可
• 校验配置：你可以根据业务需求调整useDropzone的入参，比如限制图片大小、格式、上传数量等

可选优化：给<img>标签添加onError事件，处理默认URL加载失败的情况，示例：

<img 
  src={currentImage} 
  alt="预览图" 
  onError={(e) => e.target.src = '/local-fallback-image.png'}
  style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8 }}
/>

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