# How to use images on windows 10

**URL:** <https://discourse.processing.org/t/how-to-use-images-on-windows-10/15284>\
**Category:** Beginners\
**Tags:** homework\
**Created:** [November 7, 2019, 12:12am UTC](https://discourse.processing.org/t/how-to-use-images-on-windows-10/15284 "2019-11-07T00:12:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jpmills13](https://avatars.discourse-cdn.com/v4/letter/j/f08c70/32.png) [@jpmills13](https://discourse.processing.org/u/jpmills13)\
**Post date:** [November 7, 2019, 12:12am UTC](https://discourse.processing.org/t/how-to-use-images-on-windows-10/15284/1 "2019-11-07T00:12:55Z")

</div>

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:

```auto
var img;

function preload() {

	img = loadImage("moon.jpg");

}

function setup () {

	createCanvas(480, 120);

}

function draw () {

	image(img, 0, 0);
}

```

 ![Capture](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1189a6bf192f6fcee4a8f360bfd687d7f094fb18.png)  
this is literally the exact same as my teachers code but i changed the name of my file, im using windows 10

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [November 7, 2019, 1:01am UTC](https://discourse.processing.org/t/how-to-use-images-on-windows-10/15284/2 "2019-11-07T01:01:33Z")

</div>

- [Chrome-allow-file-access-from-file.com](http://Chrome-allow-file-access-from-file.com)

> **[preload-image-masks](https://glitch.com/~preload-image-masks)**
>
> Preload Image + Mask. Then clone the original. 🎏 Glitch is the friendly community where everyone can discover & create the best apps on the web.

## index.html:

```auto
<script defer src=https://Unpkg.com/p5></script>
<script defer src=sketch.js></script>

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [November 7, 2019, 1:43am UTC](https://discourse.processing.org/t/how-to-use-images-on-windows-10/15284/3 "2019-11-07T01:43:20Z")

</div>

-a- usually you start

- online editor [https://editor.p5js.org](https://editor.p5js.org)  

- Processing IDE / p5.js Mode  

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

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

and when you double click on

> index.html

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  
“Loading”  
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

OR

- install a local node server  
i do on linux Raspberry Pi [here](http://kll.engineering-news.org/kllfusion01/articles.php?article_id=163)  
and load a moon.jpg  
and call that computer IP : port  
from a other computer in my LAN.

 ![p5js_moon_PRI_node_server](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/11e53b0709350207cdee7bc47e720256ae63c9d6.png)

but you can do it on your PC too?

> **[Local server](https://github.com/processing/p5.js/wiki/Local-server)**
>
> p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Proces...