Image not loading

p5.js Coding Questions
1

I loaded a local image in the preload() function. When I opened the sketch in chrome it says Loading… and in the console it says some weird message - access to image at is from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

But when I opened the sketch in firefox, it worked just fine… I don’t know how to solve it…
Please help me out…
Thanks in advance!!
Here goes the image of my problem

1 Like
2

Hello,

Have you try with a local server ?

3

Frankly speaking, I am a complete beginner. I don’t know what you are talking about. Would you please explain?

4

Good morning CodingIsLife,

I guess what LittleBoxes wonders is whether the issue might be resolved if you upload the sketch and/or image to an online server rather than running things from your local device (we can tell since it says D:// in the address bar). I think the best course of action for now is to try and pinpoint the problem, such as:

  • Try replacing your local image link with any online image. Does Chrome still give the exact same error?
  • Seeing it works in Firefox but not in Chrome, it could be a browser setting. Have you tested in other browsers as well? Do they give the same error?
1 Like
5

Read: Chrome-allow-file-access-from-file.com
Or keep using Firefox or use Vivaldi, which is based on Chrome btW:

Further reading about CORS and the file::// URL scheme:

1 Like
6

A local server is server on your own machine.
There is a lot of ready-made software solution or even as a plugin for some IDE (like VSCode or other…)

You can also easily create one with a little python script or with node.js.

it can avoid having CORS problems

7

Is there no other way that would enable me run my simple little sketch in chrome from my own device? I mean it would be much more easy for a beginner level one like me.

8

Using the atom text editor can help because there are plenty of packages that you can add to your editor that allows you to run a live server at the click of a button and i’ve yet to run into any issues. I suggest downloading atom for coding, then under packages->Settings view -> install packages search “server”. It will pull up atom-live-server by jas-chen. Very handy

1 Like
9

In my own Atom, I use packages “atom-live-server-plus” + “tool-bar” for such functionality: :package:

Package “atom-html-preview” is also nice for a quick preview inside Atom: :atom_symbol:

1 Like