How do I use a local server for loadimage() in p5.js?

user_14994348 0
Viewed 436

I am trying to make a game and it is working perfectly fine, until I need to use a PNG file as my background. I tried function preload() { space=loadImage('images/space.png');

} but it shows "loading..." and it never ends up loading. Then I was told I should try a local server and I tried to paste the link of the file into the previous command but it is showing the same thing. I need some explanations with how the local server works. I tried Filestash but Im not sure how to do this.

p5.js html javascript
1 Answers

There are several easy ways to set up a local server for p5js projects.

For Python 3 create a folder that contains your html, javascript and image and then from that folder run

python -m http.server

Now you can open your html with a browser pointed to localhost:8000

If an image called myImage.jpg is in an images folder along with your html that has a script that looks like this:

let img;
function preload() {
  img = loadImage('./images/myImage.jpg');
}
function setup() {
  image(img, 0, 0);
}

your image should display when the html is loaded

user_19787850
Related