- p5.js version: 0.10.2
- Web browser and version: Safari: Version 13.1 (15609.1.20.111.8)
- Operating System: macOS 10.15.4
- Steps to reproduce this:
I’ve built an application that creates simulations of chemical systems including atoms and molecules using a p5 sketch. When a new sketch is created, a Particle is created and its init function loads the relevant image asset. To handle the async behavior in the Particle class and other classes, I wrote a wrapper function that returns a promise:
`
loadParticleImage() {
// Included for debug
var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
return new Promise((resolve, reject) => {
loadImage(this.imageUrl, (result) => {
// Sets the image object property to the result for other methods to access
this.imageObject = result;
// Sets the dimensions of the
this.width = result.width;
this.height = result.height;
// Resolves the Promise with the result
resolve(result);
}, (reason) => {
reject(new Error("Particle did not load for " + this.name + ". Provided with the path " + this.imageUrl + " and the current base is " + baseUrl + ". This yields a path of " + (baseUrl + "/" + this.imageUrl)));
console.log(reason);
});
})
}
`
I have an Apache server hosting my site and the p5 application is served up through a Node/Express server. I set up a reverse proxy on Apache so that all requests to the p5 app at https://subdomain.myurl.com/ are proxied to https://localhost:8443/.
Here’s what I don’t understand:
My code works perfectly fine on Chrome & Firefox running in macOS. But, when I try to use Safari (macOS/iOS) or Chrome (iOS), I get an error that the Promise does not resolve. The path baseUrl + "/" + this.imageUrl returns an absolute image path that loads fine in Safari.
I printed p5 Error Event, but I can’t figure out where to go next:
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
isTrusted: true
returnValue: true
srcElement: <img>
target: <img>
timeStamp: 5561
type: "error"
Event Prototype
All I can guess is that there’s some implicit CORS issue that Safari/iOS is blocking or that loadImage() does not handle specifically with these browsers.
Edit: More debugging info
When I manually run loadImage() in the console, it seems the image is being found. When I put in the wrong path intentionally, I get a 404:
Purposefully wrong URL
> loadImage('sims/img/svg/Water.svg', (result) => console.log(result.width), (error) => console.log(error))
{width: 1, height: 1, canvas: <canvas>, drawingContext: CanvasRenderingContext2D, _pixelsState: Object, …}
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (Water.svg, line 0)
[Log] Event {isTrusted: true, type: "error", target: <img>, currentTarget: <img>, eventPhase: 2, …}
Correct URL
> loadImage('img/svg/Water.svg', (result) => console.log(result.width), (error) => console.log(error))
{width: 1, height: 1, canvas: <canvas>, drawingContext: CanvasRenderingContext2D, _pixelsState: Object, …}
[Log] Event {isTrusted: true, type: "error", target: <img>, currentTarget: <img>, eventPhase: 2, …}
