How to Fix the Image Appear Error in My Phaser Game

So I ran into this frustrating problem recently when working on my Phaser game my image simply wouldn’t show up on the screen. At first, I thought maybe I had the wrong file path, or maybe I mistyped the asset key. But when I opened the browser console.

Error Code

Access to XMLHttpRequest at 
'file:///F:/Hafid%20Suhanizar/KULIAH/SEMESTER%206/MAGANG/PHASER/assets/kanvas.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.

Turns out, the problem wasn’t my image or code but how I was running the game.

Let me walk you through the issue, what caused it, and how I fixed it. I’ll even share an improved version of my project with more functionality to help you practice more with Phaser.

The Code That Cause the Error

Here’s the initial code I used to load and show an image:

preload() {
   // Example: loading an image
   this.load.image("kanvas", "../assets/kanvas.png");
}

create() {
   this.add.image(200, 200, "kanvas");
}

At a glance, this seems perfectly fine, right?

But here’s the problem.

What’s Actually Going Wrong

The issue isn’t with the code itself it’s how the game is being launched in the browser.

I opened the HTML file directly from my computer using the file:// protocol. That’s a big no-no when working with Phaser or any other game framework that loads assets using HTTP requests under the hood.

Modern browsers enforce CORS (Cross-Origin Resource Sharing) rules to protect users from unsafe cross site requests. When you open an HTML file with file://, it’s treated as coming from a null origin which means it can’t make XHR requests, including the ones Phaser uses to load images.

The Solution Run a Local Server

To fix the issue, I needed to serve my files from a local server instead of opening the HTML file directly.

Here are two easy ways to do this:

VS Code + Live Server

If you’re using Visual Studio Code, here’s how to use the Live Server extension:

1. Open your project folder in VS Code.
2. Install the Live Server extension from the Extensions tab.
3. Right-click your index.html file.
4. Choose “Open with Live Server.”

That’s it your project will now be running on something like http://localhost:5500, and the CORS problem will be gone.

Python Simple HTTP Server

If you have Python installed:

# Navigate to your project folder
cd path/to/project

# Start the server (Python 3)
python -m http.server 8000

Then go to http://localhost:8000 in your browser to view your game.

Updated Project With More Practice Feature

Once I had the local server up and running, I wanted to extend the project a little to learn more. So I added another sprite and some keyboard controls.

Here’s the complete updated code:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

function preload() {
    // Load images
    this.load.image("kanvas", "assets/kanvas.png");
    this.load.image("player", "assets/player.png"); // Extra sprite for practice
}

let player;

function create() {
    // Display background image
    this.add.image(400, 300, "kanvas");

    // Add a player sprite
    player = this.add.sprite(400, 500, "player");

    // Enable arrow key input
    this.cursors = this.input.keyboard.createCursorKeys();
}

function update() {
    // Move player left and right
    if (this.cursors.left.isDown) {
        player.x -= 3;
    } else if (this.cursors.right.isDown) {
        player.x += 3;
    }
}

What I Learne From This

• Don’t open Phaser games directly from file explorer. You need a server, even for local testing.
• CORS errors are not always code related they’re often about how the browser handles resources.
• Expanding a project with keyboard controls is a great way to learn more about Phaser’s power.

Final Thought

If you’re new to Phaser like I am, running into issues like this can feel overwhelming. But once I understood the real cause CORS and file:// protocol restrictions it was a simple fix with Live Server. And adding more features like sprite movement really helped boost my confidence.