# loadImage issue

**URL:** <https://discourse.processing.org/t/loadimage-issue/14837>\
**Category:** Beginners\
**Created:** [October 20, 2019, 7:34pm UTC](https://discourse.processing.org/t/loadimage-issue/14837 "2019-10-20T19:34:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ylh](https://avatars.discourse-cdn.com/v4/letter/y/bc8723/32.png) [@ylh](https://discourse.processing.org/u/ylh)\
**Post date:** [October 20, 2019, 7:34pm UTC](https://discourse.processing.org/t/loadimage-issue/14837/1 "2019-10-20T19:34:45Z")

</div>

I have a trivial problem. I can’t seem to load an image file, which is in the same directory as the html code here [https://editor.p5js.org/ylh888/sketches/wNPt1-pbY](https://editor.p5js.org/ylh888/sketches/wNPt1-pbY)

Running on my local browser, it shows the same “Loading …” message as in the linked sketch above, but of course I do have the file in the directory. What seems to be the problem? I’m using OSX with Safari and Chrome. Is there is a security setting that I need to reset?

---

<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:** [October 20, 2019, 10:37pm UTC](https://discourse.processing.org/t/loadimage-issue/14837/2 "2019-10-20T22:37:14Z")

</div>

> [@ylh](#):
>
> What seems to be the problem?

Your “sketch.js” file there got HTML tags in it, such as `<html>`, `<script>` & `<body>`. ⚠

Vanilla JS syntax doesn’t support those kind of tags. Those should go into “.html” files instead. ⛔

Here’s a sketch w/ “index.html” + “sketch.js” files, and 2 images inside its subfolder “assets/”: 🕶

> **[Preload Image Masks](https://glitch.com/~preload-image-masks)**
>
> Preload Image + Mask. Then clone the original.

---

<div class="post-metadata">

**Author:** ![ylh](https://avatars.discourse-cdn.com/v4/letter/y/bc8723/32.png) [@ylh](https://discourse.processing.org/u/ylh)\
**Post date:** [October 20, 2019, 11:40pm UTC](https://discourse.processing.org/t/loadimage-issue/14837/3 "2019-10-20T23:40:39Z")

</div>

Thanks.

My ‘sketch’ was actually an index.html code with javascript included.

In any event, I replicated your code and still get “Loading …”. I am guessing it may be an ‘environment’ issue of some sort.

---

<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:** [October 20, 2019, 11:51pm UTC](https://discourse.processing.org/t/loadimage-issue/14837/4 "2019-10-20T23:51:45Z")

</div>

> [@ylh](#):
>
> My ‘sketch’ was actually an index.html code with javascript included.

If you wish, you can delete the “sketch.js” file and keep “index.html” only w/ your whole code in it.

However, for organization purposes, it’s better to separate the HTML code from the JS 1s.

---

<div class="post-metadata">

**Author:** ![ylh](https://avatars.discourse-cdn.com/v4/letter/y/bc8723/32.png) [@ylh](https://discourse.processing.org/u/ylh)\
**Post date:** [October 21, 2019, 1:10pm UTC](https://discourse.processing.org/t/loadimage-issue/14837/5 "2019-10-21T13:10:17Z")

</div>

OSX Safari defaults to blocking uploading of local files. The solution is to go into Develop tab and check Disable Local File Restrictions.