Reputation:
I am loading images from files on a p5.js and there is an error through from the browser (yes, all of them) that says:
URL scheme must be "http" or "https" for CORS request.
My code looks like this:
let img;
let x = 200;
let y = 200;
function preload() {
img = loadImage("spirites/OPI.jpg");
}
function setup() {
createCanvas(400, 400);
image(img, 200, 200, 200, 200);
}
function draw() {
}
I don't know how to load the image. I tried putting the full image path, still didn't work, I tried Putting file:\\\
in front of it, but to no prevail. Why isn't this working?
Upvotes: 0
Views: 198
Reputation: 29052
The errors is trying to tell you that you cannot load a file://
URL over CORS. You can only load http://
and https://
URLs. This is for security reasons, otherwise the page could scan your whole computer and look at all your files, if some malicious script was loaded in it...
So, you should probably run a local server and serve your application from there. Mongoose could be an easy start (you only need the free version - drop it into the project folder and start it; you can close it again from the systray icon), or maybe Caddy. Then you could load your file normally, relative to your page or the project root.
Upvotes: 2