P5.js: CORS request not HTTP

[jathomaz]

• [x ] Image

Details about the bug:

I cannot display ANY image on any platform. All get CORS request NOT HTTP. Please help.

• p5.js version: v1.1.9 July 22, 2020

• Web browser and version: "chrome://Version 86.0.4240.111 (Official Build) (64-bit)
  Firefox: version 81

• Operating System:

• Steps to reproduce this: Windows 10
  
  CODE: let bg;
  let y = 0;

function setup() {
// The background image must be the same size as the parameters
// into the createCanvas() method. In this program, the size of
// the image is 720x400 pixels.
bg = loadImage('u2r2.jpg');
createCanvas(326, 325);
}

function draw() {
background(bg);

stroke(255, 0, 0);
//line(0, y, width, y);
CONSOLE LOG:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///assets/u2r2.jpg. (Reason: CORS request not http).

🌸 p5.js says: An error with message "NetworkError when attempting to fetch resource." occured inside the p5js library when loadImage was called (on line 8 in sketch.js [file:///C:/Users/USER/Documents/p5js/loadUnicorn/sketch.js:8:8])

If not stated otherwise, it might be an issue with the arguments passed to loadImage. p5.js:46032:20
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.
loadImage file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:65671
setup file:///C:/Users/USER/Documents/p5js/loadUnicorn/sketch.js:8
_setup file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:48784
_start file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:48709
p5 file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:49057
_globalInit file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:48197
promise callback*[51]< file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:48222
o file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:34
o file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:38
[38]< file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:41211
o file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:34
r file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:51
file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:55
file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:18
file:///C:/Users/USER/Documents/p5js/loadUnicorn/p5.js:20
p5.js:65671:18

​

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[limzykenneth]

You will need to run the sketch with a local server, see here for more info. If you need further help, do post your question on the forum. Thanks.

[jathomaz]

I do not consider this action closed. I cannot run any sketch that displays
an image in any browser: i.e.Chrome, Firefox. My sketches work fine in the
on-line P5.js editor, but not outside of the local environment. Are you
saying that the P5.JS is not "industrial", that it's just a toy? We cannot
download our folders and run on a real browser? What's the point, then? I
am not good at coding JS, but maybe I'll just learn it enough to fix it. Or
maybe the developers have screwed it around to run on their local
environment, thus obliterating running in a "real" environment. I am
reopening this.

On Fri, Oct 23, 2020 at 11:03 AM Kenneth Lim [e-mail]
wrote:

Closed #4872 https://github.com/processing/p5.js/issues/4872.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/processing/p5.js/issues/4872#event-3914649214, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AFKX6JXKIPFMR5TTHH7OKYLSMGSNBANCNFSM4S4T2SLQ
.

[limzykenneth]

The local sketch will need to be served through a local server in order for any loading functions to work. That is the case for all browsers and regardless of whether you are using p5.js or not, it is a limitation imposed by the browsers. The linked wiki article provides many different methods of creating a local server to serve your sketch and they should let you load images in your p5.js sketch locally.