How to gain access to local images in JavaScript/p5.js/HTML

Question

I want to display an image file from a local folder in JavaScript (p5.js). Every time I try I get: Access to image at "XXXXX" from origin "null" has been block by CORS policy: The response is invalid.

The HTML, js and images are all inside a file tree, inside the media server's project folder.

They HAVE to be run locally. Running from any other location than the folder they are in is not an option (referring to a lot of answers talking about running a web server.

function setup() {
  createCanvas(96, 192);
  img = loadImage('images/square1-01.png'); // Load the image
}

function draw() {
  image(img, 0, 0);
}

//ALSO TRIED

img = loadImage('file://images/square1-01.png'); // Load the image

The above text is a super simplified version that I isolated from the main file so I could run it standalone, just so I could get to the point of getting an image, before I started adding in the other layers of complexity. Thus the layout is entirely from a tutorial.

Relevant files are:

.../web/d3test.html

.../web/d3test.js

.../web/images/square1-01

.../web/images/square2-01

.../web/images/square3-01

Client-side JavaScript is prohibited from accessing the file system and for good reason. Can you imagine how easy it would be to plant a virus if it could? The files must be accessible from a web server. — Scott Marcus, Aug 28 '19 at 15:55
Sorry, I'm not actually a web developer of any kind, more that I use JavaScript because a lot of media tools (Adobe, disguise/d3) use it for various bits of scripting, so a lot of the logic of this is still very mysterious to me. So there's no way for a js file like this to access an image file, even if it's sitting in the same directory? — Rury Nelson, Aug 28 '19 at 16:03
I don't know if it helps that the media server never touches the internet and the page is run 100% locally — Rury Nelson, Aug 28 '19 at 16:07
As I said, you must access the files via a "request to a web server". You can easily set up a local server though. — Scott Marcus, Aug 28 '19 at 16:35

Kevin Workman · Answer 1 · 2019-08-28T17:09:05.277

JavaScript is blocked from accessing local files like this, for security reasons. You wouldn't want every website snooping through the files on your hard drive. That's what's causing your error.

Instead of accessing files on your local hard drive, you need to access files from a web server. You could upload your your sketch (along with your images) to a web host. Shameless self-promotion: here is a tutorial that introduces some options for hosting.

You could also use the P5.js editor. This is a free editor for P5.js that automatically uploads everything to a web host. Your could should work fine there.

You could also run your own local web server.

If you really, really, really need to run this without a web server, then you can try the File API described in this answer or find a setting in your browser described in this answer.

*you need to access files from the internet* <-- No, you need to access files from a web server. That could be an intranet. — Scott Marcus, Aug 28 '19 at 16:34

How to gain access to local images in JavaScript/p5.js/HTML

1 Answers1