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

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

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

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

Answer 3

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

图片不会加载到p5.js中

3 个答案: