无法显示 p5 JavaScript 背景图片

Question

我正在尝试使用 p5 制作 JavaScript 游戏。我需要一个图像作为背景，但它没有显示。我已经为图像设置了绝对路径，我是运行使用 vs code liver server 的服务器。

sketch.js

var backgroungImg;

function preload() {
  backgroundImg = loadImage(
    "C:/full path/img/extra/map1.png"
  );
}

function setup() {
  createCanvas(1000, 600);
  background(backgroundImg);
}

function draw() {}

index.html

<html>
  <head>
    <script src="p5.min.js"></script>
    <script src="C:/full path/src/sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body

Answer 1

@rishi 找到了答案。正如我们所怀疑的那样，它必须是一个 http/s 调用。他报告说使用：

http://127.0.0.1:8080/img/extra/map1.png

解决了问题（IP 地址当然需要检查安装）。

为了记录在案，以防其他人登陆这里，这是最初的想法：

这看起来像是 CORS（Cross-origin 资源共享）问题 - 不允许您的代码加载本地文件。您需要使用 http/https 协议，例如通过删除完整路径并使用 src/sketch.js 或与本地服务器上的文件结构相关的任何内容。

我没有本地服务器，但我在远程服务器上进行了测试，试图从不同来源加载文件并遇到了问题。如果我将背景图像文件放入同一个系统中，它就可以正常工作。你可以在 https://rgspaces.org.uk/bayeuxtapestry/p5test.html

上看到它

这是我使用的代码：

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
    <script src="assets/sketch.js"></script>
  </head>
  <body>
    <main>
    </main>
  </body>
</html>

在 assets/sketch.js 中我有

var backgroundImg;

function preload() {
  backgroundImg = loadImage("boat-and-horses-768x546.png");//this file is in the same folder
}

function setup() {
  createCanvas(1000, 600);
  background(backgroundImg);
}

function draw() {
}

关于这个问题有一些讨论，听起来好像可以安装一个本地代理来绕过 CORS 问题。例如参见 [=14=]

无法显示 p5 JavaScript 背景图片

Not able to display p5 JavaScript background image

javascript

p5.js