Images failing to fetch in p5.js web editor, but only on specific browsers

p5.js
1

I am a teacher and have noticed this issue repeatedly: several students will run a project with images and only one will get an error that says “couldn’t fetch”. The students are all working from a duplicated starter file so I know that the images are correctly loaded. I’ve also verified that they all have the correct code.

The best way I’ve been able to solve it is by having the student in question use a different browser, and this usually works.

My question is, is there a specific browser or maybe a browser extension my students should be avoiding? Needless to say they find this error quite frustrating since they’ve coded everything correctly but are not getting any output.

Here’s an example of the code: p5.js Web Editor

2

Hi @pstephan4,

Maybe a good info would be, which browser the student used ?
I’ve tested on Chrome, Firefox, Samsung Internet and Edge. All worked as expected.
General it should work with all modern browsers which supports javascript.

Cheers
— mnse

3

Hi @mnse ,

Each time the issue has come up the student has been using Chrome. This has happened to multiple different students now. But of course I am able to run the code without issue when using Chrome.

I don’t know if maybe there is an issue with certain Chrome extensions or settings that would cause this?

4

Hi @pstephan4,

hard to say as I’m not able to reproduce. Maybe check the browser console (DevTools) output for further details when happen. :man_shrugging:

Cheers
— mnse

5

I am also a teacher and have posted about this problem. Today, using Chrome, I get a failed to fetch error with the P5.js environment, but in openprocessing.org environment, the six images all loaded properly.

6

Im late to the game here, but I had the same issue. I moved to use createImg() and used .hide() to mimic the loadImage() functionality