在 Visual Studio 代码中使用 p5.js 访问文件

Question

我是刚开始使用 p5.js 的新手，刚开始使用 Visual Studio 代码，但在使用访问文件（无论是图像还是文本）的任何函数时遇到问题。我的目标是加载一个文本文件，以便将其解析为词汇数据。

根据参考文档，我添加了预加载。你可以看到我也尝试用一个图像文件做这个，它产生了相同的结果。

function preload(){
fileContents = loadStrings('defaultvocab.txt');
//img = loadImage('AthensDemocracy.jpg');
}

结果就是这组错误信息并在预加载中挂起。

我不确定这是 VSCode 的设置还是我需要在它创建的 JSON 文件中做的事情，我必须将文件添加到该文件才能使其正常工作另外，所以它可能是要添加的东西，但我找到它的运气并不好。目前launch.json是这样的：

{

// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}",
        "file":"index.html"
    }
]

请原谅悲伤的 90 年代网页设计，感谢您的帮助！

Answer 1

网页似乎仍在通过本机文件系统路径而不是本地网络服务器 (localhost:8080) 加载。

如果您在浏览器中手动打开 htts://localhost:8080 运行（Web 服务器实际上是运行ning 吗？）

就个人而言，我使用 Sam Levigne 的 p5.vscode addon:

安装它
右键单击您的 index.html
单击 使用实时服务器打开

我发现实时编码（保存时自动重新加载）非常有用，尤其是在制作原型时。

在 Visual Studio 代码中使用 p5.js 访问文件

Accessing Files with p5.js in Visual Studio Code

p5.js

visual-studio-code