How to use images on windows 10

Im trying to insert custom images into p5JS, I cant enter any images period. Even if I change the name of the base files and rename them excatly what they were before hand the images now dont work. My code and files are identical to the examples yet nothing works
My Code:

var img;

function preload() {

img = loadImage("moon.jpg");


function setup () {

createCanvas(480, 120);


function draw () {

image(img, 0, 0);


this is literally the exact same as my teachers code but i changed the name of my file, im using windows 10

1 Like


<script defer src=></script>
<script defer src=sketch.js></script>
1 Like

-a- usually you start

-b- but you show a picture of a directory with

  • index.html
  • sketch.js
  • moon.jpg
  • p5.js

and when you double click on


and hope
++ browser opens
++ picture is shown

is that insofar that what you have done?

like when i follow my online link, download to my computer
and see only the text
is that what is your problem?
can use the diagnostic / inspect console log,
but that shows only “problem load image file”

problem is you need a local server for that kind of things
( while just draw a circle works fine )

so back to the first two points:

  • online editor
  • PDE p5.js mode


  • install a local node server
    i do on linux Raspberry Pi here
    and load a moon.jpg
    and call that computer IP : port
    from a other computer in my LAN.

but you can do it on your PC too?