本地非在线编辑器环境使用p5.js调用loadImage加载图片失败如何解决

问题根因 #

这个问题是本地开发p5.js项目的高频问题，本质是浏览器的同源安全策略限制：直接通过file://协议打开本地HTML文件时，浏览器禁止JavaScript调用fetch接口读取本地文件资源，因此loadImage方法会触发协议不支持的报错，你的路径配置本身没有问题。

解决方案 #

你可以任选以下任意一种方式解决：

• 编辑器插件启动本地服务：如果你用VS Code开发，直接安装「Live Server」插件，安装完成后右键点击项目中的index.html文件，选择「Open with Live Server」，插件会自动启动本地服务并在浏览器打开项目，默认访问地址为http://127.0.0.1:5500，此时本地图片资源可以正常加载。
• 用Python启动临时本地服务：如果你的设备已安装Python环境，直接打开终端，切换到项目根目录（index.html所在文件夹），执行对应命令即可启动本地服务：
  • Python3环境执行：python3 -m http.server
  • Python2环境执行：python -m SimpleHTTPServer
    启动完成后在浏览器访问http://localhost:8000即可正常加载资源。
• 用p5.js桌面编辑器运行：直接下载p5.js官方桌面编辑器，将项目导入后直接运行，编辑器自带本地运行环境，不会触发该类协议限制报错。

额外注意事项 #

你的index.html中存在脚本引入顺序错误：当前你将script.js放在了p5.js的引入代码之前，preload、loadImage等方法依赖p5.js运行环境，建议调整引入顺序，将p5.js的引入代码移到script.js之前，避免出现方法未定义的报错：

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">

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