How can i load correctly a images in p5.js in a server

Question

p5.js says: It looks like there was a problem loading your image. Try checking if the file path [ http://www.adsmedia.pe/demos-publicidad/imagenes/super.png] is correct, hosting the image online, or running a local server.[ https://github.com/processing/p5.js/wiki/Local-server] p5.js:48242:7

Please somebody could help me with this, I have changed the path to relative and absolutes path and nothing works

Answer 1

1. I would suggest you download local server like live-server or browser-sync (they are all javascript lightweight servers)

2. Start your srever from the root of the project.

3. Suppose this is your file structure:

   • Project.
     • index.html
     • app.js (where your setup goes)
     • images (super.png,fondo_juego.png)

4 . Your preload should look like this: function preload() { img = loadImage('./images/super.png'); bg = loadImage('./images/fondo_juego.png'); function preload() { img = loadImage('./images/super.png'); bg = loadImage('./images/fondo_juego.png');

5 . with your server ,serving from the root folder this will defintely work.