在在线编辑器之外使用 p5js 时无法加载图像

Question

我正在使用 p5js，我正在尝试在我的目录中加载和显示一些图像。我正在尝试在预加载函数中使用 loadImage() 方法来加载图像。但是，当我运行程序时，我得到这些错误

Fetch API cannot load file:///Users/mainuser/Documents/school/Senior/FinalProject/imgs/arms_up.png. URL scheme "file" is not supported.

 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (imgs/arms_up.png) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)

TypeError: Failed to fetch
    at fetch (p5.js:28096)
    at p5._main.default.loadImage (p5.js:80673)
    at p5.js:62949
    at preload (script.js:118)
    at p5._start (p5.js:62905)
    at new p5 (p5.js:63261)
    at _globalInit (p5.js:62189)

我的 imgs 文件夹与我的 index.html

在同一个文件夹中

我的猜测是 fetch() 可能需要实际的 URL 而不是文件路径。

还有其他人运行解决过这个问题吗？我在下面附上了我的代码（我取出了不相关的代码）。谢谢！

index.html

<!DOCTYPE HTML>

<html>
    <head>
        <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="script.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.4.0/lib/p5.js"></script>
        <link rel="stylesheet" href="styles.css">
    </head>


    <body>
        <h1>Pose Game</h1>
        <button type="button" onclick="init()">Start Game!</button>
        <button type="button" onclick="restart_game()">Restart Game</button>
        <div id="main-div">
            <div id="flex-div">
                <div id="webcam-div">
                    <canvas id="canvas"></canvas>
                </div>
                <div id="p5-div"></div>
            </div>
        </div>
    </body>


</html>

script.js

let arms_up_png;
let left_arm_up;
let right_arm_up;

function preload() {
   arms_up_png = loadImage("imgs/arms_up.png");
}


function setup() {
    var canvas = createCanvas(400, 400);
    canvas.parent('p5-div');
}

function draw() {
    background('green');
    image(arms_up_png, 50, 50, 20, 20);
}

Answer 1

你说得对 fetch() 不能使用本地文件路径，因为 p5js 需要加载图像文件的内容才能显示它，你也不能使用 p5js 的本地文件路径 loadImage()函数。为了在本地运行您的草图，您需要使用本地网络服务器。 Visual Studio Code Live Server extension 对此非常方便。

在在线编辑器之外使用 p5js 时无法加载图像

Image not able to load when using p5js outside of online editor

p5.js