使用face-api.js开发React人脸识别应用时模型加载失败求助

数据老陈

2026-6-29

React中face-api.js模型加载失败的排查方案

路径错误排查
1. 目录名称匹配：你提到模型存放在public/model目录，但代码里写的是../public/models（注意单复数差异），先确认实际目录名是model还是models，必须和代码里的路径完全一致。
2. React静态资源路径规则：public目录是项目的静态资源根目录，加载时不需要写../public，直接用绝对路径即可。修改代码中的路径为'/models'（如果目录是models）或者'/model'（如果目录是model）：
```
await Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
]);
```
模型文件完整性检查
确认目标目录下每个模型对应的文件都完整：
- tinyFaceDetector需要：tiny_face_detector_model-weights_manifest.json和对应的shard文件
- faceLandmark68Net需要：face_landmark_68_model-weights_manifest.json和对应的shard文件
- faceRecognitionNet需要：face_recognition_model-weights_manifest.json和对应的shard文件
  缺少任何一个文件都会导致加载失败。

加载时机与错误捕获
确保加载代码在组件挂载后执行，比如放在useEffect钩子中，同时添加错误捕获查看具体报错信息，方便精准定位问题：

useEffect(() => {
  const loadModels = async () => {
    try {
      await Promise.all([
        faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
        faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
        faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
      ]);
      console.log('模型加载成功');
    } catch (error) {
      console.error('模型加载失败:', error);
    }
  };
  loadModels();
}, []);