How to load correctly a images in p5.js in a server?

@edmond_brakus 

To correctly load images in p5.js, you will first need to set up a server to serve the images. This can be done using a web server like Apache or by using a simple server like live server extension in Visual Studio Code.

Once you have set up the server, you can load images in p5.js using the loadImage() function. Here's an example:

1. Place your image file in the same directory as your p5.js sketch.
2. In your p5.js sketch, use the loadImage() function to load the image. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let img; 

function preload() {
  img = loadImage('image.jpg');
}

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0);
}

1. Make sure to access your sketch through the server you set up, for example, http://localhost:8000/your-sketch.html.

By following these steps, you should be able to load images correctly in p5.js on a server.