# How do I load and image in p5js for html? **URL:** \ **Category:** Beginners\ **Created:** [December 10, 2020, 4:00pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120 "2020-12-10T16:00:19Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\ **Post date:** [December 10, 2020, 4:00pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/1 "2020-12-10T16:00:19Z")
It’s hard to explain but basically, I have a project which includes an image and I want to make an Html website that runs the p5js code. I already got the website set up and the code, but when I run it the image doesn’t load, even though it’s in the web file on my computer. How do I fix this? p5js project: [https://www.openprocessing.org/sketch/1038452](https://www.openprocessing.org/sketch/1038452) HTML code: ```auto < MARS P5.js 2020 Image Processing

MARS P5.js 2020 Image Processing

e

<-- ``` Also for some reason the it doesn’t all the time ---
**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:** [December 10, 2020, 4:38pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/2 "2020-12-10T16:38:36Z")
[p5js.org/reference/#/p5/preload](http://p5js.org/reference/#/p5/preload) ---
**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\ **Post date:** [December 10, 2020, 6:02pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/3 "2020-12-10T18:02:19Z")
Thx man \<3, Does setup run every new frame? ---
**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:** [December 10, 2020, 6:06pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/4 "2020-12-10T18:06:34Z")
[p5js.org/reference/#/p5/setup](http://p5js.org/reference/#/p5/setup) ---
**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\ **Post date:** [December 10, 2020, 6:19pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/5 "2020-12-10T18:19:36Z")
I too speak in the language of hyperlinks ---
**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\ **Post date:** [December 10, 2020, 6:23pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/6 "2020-12-10T18:23:37Z")
On my website it’s just stuck at loading now, is there a solution to that? ---
**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:** [December 10, 2020, 6:31pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/7 "2020-12-10T18:31:47Z")
Am I supposed to know which site? 🤫 ---
**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\ **Post date:** [December 10, 2020, 8:25pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/8 "2020-12-10T20:25:33Z")
The html code I posted above running the p5.js sketch ---
**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:** [December 10, 2020, 8:46pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/9 "2020-12-10T20:46:29Z")
AFAIK your HTML file should work. The unknown factor is the “image.js” file. ❓ Anyways the example sketch below contains both the “index.html” & “sketch.js” files together w/ 2 images inside its subfolder “assets/”: 👼 https://glitch.com/embed/#!/embed/preload-image-masks?path=index.html&previewSize=0&sidebarCollapsed=true ---
**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\ **Post date:** [December 10, 2020, 10:01pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/10 "2020-12-10T22:01:10Z")
image.js file is in the same folder as the html and the photo file. What am I supposed to asyncing? ---
**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:** [December 10, 2020, 10:07pm UTC](https://discourse.processing.org/t/how-do-i-load-and-image-in-p5js-for-html/26120/11 "2020-12-10T22:07:12Z")
> [@olaf000olaf](#): > > “image.js” file is in the same folder as the html and the photo file. That’s not what I’ve meant by “unknown factor”. I’ve meant its content! ⚠ You should pay attention on how my “sketch.js” file loads its 2 images inside **preload()**. 🖼