我正在尝试使用p5制作一个JavaScript游戏。我需要一个图像作为背景，但它没有显示。我已经为图像设置了绝对路径，我正在运行一个使用vs code liver服务器的服务器。
草图.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
@rishi找到了答案。正如我们所怀疑的那样，这一定是一个http/s调用。他报告说，使用：
http://127.0.0.1:8080/img/extra/map1.png
解决了问题(IP地址当然需要检查安装(。
为了记录在案，如果有其他人降落在这里，这里是最初的想法：
这看起来像是一个CORS(跨源资源共享(问题——不允许您的代码加载本地文件。您需要使用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/skitch.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问题。例如，当http://localhost是的来源