How to preload local files using Phaser (JS)?

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!

The browser’s security won’t allow you to access local files directly from your script. Instead, you’ll need to create a local server in order to comply with the security restrictions.

VSCode has an extension called Live Server that can do this for you.

Also, here is a handy article from Codecademy about the subject: Developing Phaser 3 Games Locally

1 Like

Thanks!
But with Live Server, it looks like I’m just making a fake browser window to run my program in, and I still wouldn’t be able to upload it online for others to play… or am I mistaken? :confused:

It’s creating a small server on your system and launching the browser for you with that page open so you can develop locally much easier. It isn’t a fake browser or anything.

Once you upload all your files to a server, then you won’t need the one running on your system. You’ll be able to visit the page wherever you have it hosted, and as long as you’ve uploaded the images there as well, then your users will be able to use them too.

1 Like

Thanks a lot, I’ll look into it!

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.