# Image Not Loading In Simple Project, Not Sure What I Am Doing Wrong

**URL:** <https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828>\
**Category:** Phaser 3\
**Created:** [October 10, 2024, 3:23pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828 "2024-10-10T15:23:41Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![ModerateCape86](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@ModerateCape86](https://phaser.discourse.group/u/ModerateCape86)\
**Post date:** [October 10, 2024, 3:23pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/1 "2024-10-10T15:23:41Z")

</div>

I am trying to learn Phaser.js, and I don’t have access to node.js right now so I am trying to use the CDN link, but when I try to load an image, it doesn’t work.  
HTML:

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phaser.js Application</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.85.2/phaser.js" integrity="sha512-cNQbPGzsFk6XzoLfFD66Ra1G/gBKuNksLjEtUFmsRG6+uvJWsd6WVjUwgPTyZUKY/+L/PvIeV/r0laALxt6ttA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

```

JavaScript:

```javascript
const config = {
    type: Phaser.AUTO,
    width: 600,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

function preload() {
    this.load.image('player', 'assets/player.png'); // Updated image path
}

function create() {
    this.add.circle(75,75, 50, 0xff0000);
    this.add.image(300, 300, 'player');
}

function update() {
    
}

```

I don’t know I am doing wrong, could anyone help? I know for a fact that the file path is correct.

---

<div class="post-metadata">

**Author:** ![ModerateCape86](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@ModerateCape86](https://phaser.discourse.group/u/ModerateCape86)\
**Post date:** [October 10, 2024, 3:27pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/2 "2024-10-10T15:27:56Z")

</div>

I should probably also mention that I am trying to run this on a file:// because I don’t have access to localhost on this computer.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 10, 2024, 3:28pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/3 "2024-10-10T15:28:01Z")

</div>

Look in the browser console (Developer Tools) for errors.

The page URL in the address bar should start with `http:` not `file:`.

---

<div class="post-metadata">

**Author:** ![ModerateCape86](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@ModerateCape86](https://phaser.discourse.group/u/ModerateCape86)\
**Post date:** [October 10, 2024, 3:29pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/4 "2024-10-10T15:29:19Z")

</div>

Nothing shows up except for Phaser v3.85.2 (WebGL | Web Audio) and [Phaser.io](http://Phaser.io) link

---

<div class="post-metadata">

**Author:** ![ModerateCape86](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@ModerateCape86](https://phaser.discourse.group/u/ModerateCape86)\
**Post date:** [October 10, 2024, 3:29pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/5 "2024-10-10T15:29:55Z")

</div>

Also,  
 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/4826d40acdb515b8bd5de38e472221b266e5a935.png)  
this is what I am using

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 10, 2024, 3:34pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/6 "2024-10-10T15:34:59Z")

</div>

And what do you see where the game should be? Is it all blank or is there a little green placeholder image?

There are some low-install servers in [Web servers: Multiplatform](https://github.com/samme/phaser3-faq/wiki/Web-servers#multiplatform).

---

<div class="post-metadata">

**Author:** ![ModerateCape86](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@ModerateCape86](https://phaser.discourse.group/u/ModerateCape86)\
**Post date:** [October 10, 2024, 3:46pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/7 "2024-10-10T15:46:25Z")

</div>

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/3/36953a61c13cbce519898459baef2179ecefe6e4.png)

This is what I see.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 10, 2024, 5:19pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/8 "2024-10-10T17:19:43Z")

</div>

Move the player to (100, 100) and see if there’s a difference.

---

<div class="post-metadata">

**Author:** ![ModerateCape86](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@ModerateCape86](https://phaser.discourse.group/u/ModerateCape86)\
**Post date:** [October 10, 2024, 6:12pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/9 "2024-10-10T18:12:11Z")

</div>

![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/eff43e0e3af08938b0665ca7e634695f264cca34.png)

It moves the green box to the coordinates. It also responds to when I increase its x and y in a loop.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 10, 2024, 6:16pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/10 "2024-10-10T18:16:32Z")

</div>

Oh I see it now. You’ll have to use one of the web server options linked above if you want Phaser to load images.

---

<div class="post-metadata">

**Author:** ![ModerateCape86](https://avatars.discourse-cdn.com/v4/letter/m/53a042/32.png) [@ModerateCape86](https://phaser.discourse.group/u/ModerateCape86)\
**Post date:** [October 10, 2024, 6:34pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/11 "2024-10-10T18:34:30Z")

</div>

What web server options??? (I’m probably being blind)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [October 10, 2024, 7:01pm UTC](https://phaser.discourse.group/t/image-not-loading-in-simple-project-not-sure-what-i-am-doing-wrong/14828/12 "2024-10-10T19:01:11Z")

</div>

[https://github.com/samme/phaser3-faq/wiki/Web-servers#multiplatform](https://github.com/samme/phaser3-faq/wiki/Web-servers#multiplatform)