图片无法加载 p5.js

Question

我正在尝试将图像上传到我的一个 p5 文件。我按照 p5 参考资料中描述的方式进行了尝试，但这不起作用。然后我尝试在单独的函数中编写图像，并在 draw() 中编写运行函数，但这也不起作用。我还尝试将 JS 文件嵌入到 HTML 文件中以在浏览器中显示它，但同样，这不起作用。我试图通过使用 console.log 来定位问题，显然，您无法进入 preload 功能。

我还检查了图像的名称是否正确，并且它与 JS 文件位于同一文件夹中。

这是我尝试使用的代码片段：

let img;

function preload() {
  img = loadImage("hamster.jpg");
}

function draw() {
  image(img, 0, 0, 300, 300);
}

提前致谢！

Answer 1

你的代码对我来说工作正常。

查看我用您的代码创建的这个 p5 项目 - 也许您的项目结构存在问题： https://editor.p5js.org/LukeGarrigan/sketches/WS_5sauc2

Answer 2

所以你需要做的是启动一个本地服务器，你可能只是点击 html 文件。要启动本地服务器，请使用本指南 https://github.com/processing/p5.js/wiki/Local-server

Answer 3

let img;
function preload() {
  img = loadImage("hamster.jpg");
}

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

function draw() {
  image(img, 0, 0, 300, 300);
}

图片无法加载 p5.js

image won't load in p5.js

javascript

image

p5.js