p5.js-web-editor
p5.js-web-editor copied to clipboard
"Failed to Fetch" errors for images on web editor
p5.js version
1.9.1
What is your operating system?
Mac OS
Web browser and version
Chrome 123.0.6312.59
Actual Behavior
We've been seeing this error pretty consistently during our coding classes. When students try to upload a new image, or duplicate an existing project with images, they sometimes encounter a "Failed to fetch" error with the images. It seems inconsistent which students receive this error but in a class of 18, we can usually count on about 3-4 students encountering it during a class.
Usually, by the time the next class happens, the error has resolved itself. But it is a problem when students can't really move forward during class due to this error.
See attached screenshots for two students' who encountered this error today:
Expected Behavior
No errors in console. And images load and display on canvas as expected.
Steps to reproduce
This is difficult to reproduce because it seems after a few hours, or a few days, the error resolves itself. So it doesn't seem like it's an issue with the students' code but something on the p5 server side...?
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.
I'm encountering an identical issue with students using images in my creative coding class. This was not an issue last semester, and the code for the students with the issue is correct according to the examples used in the p5 reference. The issue seems to be inconsistent across which students have it, and it is unclear what resolves it. Some students have fixed the error by trying different images altogether, even though the images which were not working are supported file formats and of a reasonable file size.
I've also been experiencing this issue with my students recently. It is sporadic and hard to reproduce, but when I have come across it, switching browsers (from Chrome to Firefox) has seemed to help.
Same here - same issue. Uploaded images DO work for createImg() but not for loadImage() It's very sporadic/inconsistent. Only effects a few (4/5 out of a class of 80). Fixes that sometimes work: deleting / replacing image Duplicating sketch Or, starting brand new sketch, copying and pasting old code, re uploading images.
Same problem. This has only popped up recently, in the past several weeks, exactly as described by other commenters above. More detailed error report:
TypeError: Failed to fetch at _main.default.loadImage (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js:87288:11)
at https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js:65228:65
at preload (blob:https://preview.p5js.org/7e7de300-2d11-4f4f-8321-f0dda00ad4eb:4:13)
at p5._start (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js:65185:25)
at new p5 (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js:65513:20)
at _globalInit (https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.2/p5.js:64409:15)
Thank you for reporting these! We'll prioritize working on this issue and hopefully provide an update to this within the next week or so!
@raclim I would like to work on this issue, can you please assign me this issue? Thanks!
@PiyushChandra17 assigned!
I've also been experiencing this issue with my students recently. It is sporadic and hard to reproduce, but when I have come across it, switching browsers (from Chrome to Firefox) has seemed to help.
worked for me! Also I'd like to say that I tried to use a lot of imagens .PNG or .JPEG and the issue appeared randomly on them, by switching my browser from OperaGX to Chrome all of my images worked just fine.
@raclim Is this issue resolved?
Still having this issue. I would say 50% of my class was affected.
Thank you for the update on this! I'm sorry that it took a while to get back here—after trying a few different solutions I ended up coming to an impasse. @bmoren would you be able to share any example URLs to affected sketches?