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

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.

1 thought on “How do I use a local server for loadimage() in p5.js?”

  1. 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

    Reply

Leave a Comment