React中ml5+p5瑜伽AI训练器路径参数导致模型加载失败

问题场景 #

我用React结合ml5、p5开发了瑜伽AI训练器，开发了一个可接收本地JSON文件中单个体式作为props的组件，组件需加载public文件夹中的模型，目标是通过摄像头识别指定瑜伽体式并动态返回识别出的体式名称。

测试了两个摄像头页面：

• 页面1路径/practice，对应摄像头组件1，可正常运行
• 页面2路径/practice/poseId，对应摄像头组件2，代码与组件1基本一致，仅多接收一个匹配对应ID的指定体式props

但在页面2（如/practice/1）中出现报错：

Error loading model: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

报错指向以下代码：

const modelInfo = {
  model: "model/model.json",
  metadata: "model/model_meta.json",
  weights: "model/model.weights.bin",
};

fetch(modelInfo.model)
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then((data) => {
    console.log("Model JSON:", data);
    brain.load(modelInfo, brainLoaded);
  })
  .catch((error) => {
    console.error("Error loading model:", error);
  });

问题根源 #

错误出在模型文件的相对路径解析逻辑：

• 在/practice页面时，相对路径model/model.json会被解析为网站根目录下的/model/model.json，这个路径对应public文件夹中的模型文件，请求正常。
• 在/practice/1页面时，相对路径会被解析为/practice/model/model.json，这个路径不存在，服务器返回404页面的HTML代码。而代码尝试把HTML解析成JSON，自然会抛出"Unexpected token '<'"的错误——因为HTML的开头是<!DOCTYPE>，不属于合法JSON格式。

解决方案 #

有两种可靠的修复方式：

1. 使用根目录绝对路径 #

直接把模型路径改为以/开头的绝对路径，确保无论当前路由是什么，都从网站根目录请求模型文件：

const modelInfo = {
  model: "/model/model.json",
  metadata: "/model/model_meta.json",
  weights: "/model/model.weights.bin",
};

2. 使用React的PUBLIC_URL环境变量（推荐） #

如果是用Create React App搭建的项目，默认支持PUBLIC_URL环境变量，用它拼接路径可以适配不同的部署环境（比如子目录部署）：

const modelInfo = {
  model: `${process.env.PUBLIC_URL}/model/model.json`,
  metadata: `${process.env.PUBLIC_URL}/model/model_meta.json`,
  weights: `${process.env.PUBLIC_URL}/model/model.weights.bin`,
};

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