I’m making a Phaser game in JS.
In my preload() method, I want to load an image with this.load.image(‘wizard’, ‘./images/wizard1.png’) but when I run it it only shows a small green square, meaning it isn’t loaded. I’m certain the rest of my code is fine because it works when I replace the image link with an online link (https://content.codecademy.com/projects/learn-phaser/cyoa/wizard.png), it only fails when I use one from a file in my computer. I tried to use ‘./images/wizard1.png’ just like I would in a HTML file when referencing a source (e.g. ). Is this not the way to get the image?
If it’s of any use, I tried following an online tip to use DevTools and found this error:
Access to XMLHttpRequest at ‘file:///C:/Users/sru/Documents/Programming%20Projects/Story%20Game%20(Phaser)/public/images/wizard1.png’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
Am I simply not allowed to use images from my computer, and can only use online links? How come I’ve seen example code of people’s preload methods where they could just easily reference a file path like ‘assets/image1.png’?
I’d appreciate any help, thanks!