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() {

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

    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


Leave a Comment