在p5.js中将照片设置为背景

Question

我正在尝试将照片作为背景上传到p5.js。不幸的是，我在控制台中变成2条错误消息。

    p5.js:74522 Fetch API cannot load file:///C:/Users/User/Desktop/project/sample.png. URL scheme must be "http" or "https" for CORS request.
_main.default.loadImage @ p5.js:74522
setup @ sketch.js:15
_setup @ p5.js:58811
_start @ p5.js:58739
p5 @ p5.js:59080
_globalInit @ p5.js:58340
load (async)
25.../core/main @ p5.js:58353
o @ p5.js:34
(anonymous) @ p5.js:38
16../color/color_conversion @ p5.js:52829
o @ p5.js:34
r @ p5.js:51
(anonymous) @ p5.js:55
(anonymous) @ p5.js:18
(anonymous) @ p5.js:20

p5.js:74522 Uncaught (in promise) TypeError: Failed to fetch
    at p5._main.default.loadImage (p5.js:74522)
    at setup (sketch.js:15)
    at p5._setup (p5.js:58811)
    at p5._start (p5.js:58739)
    at new p5 (p5.js:59080)
    at _globalInit (p5.js:58340)

这是我的代码：

var back;

function setup() {
  createCanvas(800, 600);
  back = loadImage("sample.png");
}

function draw() {
    background(back);
}

我的错误在哪里？如何显示照片？先感谢您！期待您的回音。

Answer 1

制作背景图像时我也遇到了这个问题。

我通过在p5.js项目中运行服务器解决了这个问题。

我使用了python HTTP服务器在python 3.x中启动服务器的命令如下。

py -m http.server

请参阅有关使用服务器更改背景图像的演示视频。

Bubbles screensaver using p5.js