在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

我解决了在preload()函数中加载背景图像的问题：

function preload() {
  back = loadImage("sample.png");
}

function setup() {
  createCanvas(800, 600);
}

function draw() {
    background(back);
}

Answer 2

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

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

我使用python HTTP server命令启动python3.x中的服务器，如下所示。

py -m http.server

查看使用服务器更改背景图像的演示视频。

Bubbles screensaver using p5.js