P5.js - not displaying static gif image

[Sven]

Hello @Chrissy,

In relation to the age of the p5.js project and speed of development, that book is pretty old (2015). It is reasonable to expect some compatibility issues when running code examples from that time on the latest version of the p5.js library.

That said: the example does work fine as long as you serve the sketch via a web server (not from the local file system). I recently explained why it isn’t working locally in another thread:

@Sven

This has to do with how loadImage and loadSound are implemented. The functions use something called Fetch API and have that configured in such a way that downloading of files isn’t allowed locally. Believe it or not, it’s related to security.

There’s not much you can do about it really (except patching p5.js). Running a web server (locally or elsewhere) as you did is the way to go.

If you’re interested in the technical details, read up on CORS and Fetch API.

Your options (in order of my preference) are:

• Run a web server on your local machine.
• Configure your web browser to allow access to local files (if that’s supported in your browser).
• Run an older version of the p5.js library (as you figured out yourself).
• Avoid loadImage as a workaround (as @everythingability suggested).