# I can't add image neither background images nor sprites

**URL:** <https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825>\
**Category:** Phaser 3\
**Created:** [April 8, 2020, 3:46pm UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825 "2020-04-08T15:46:47Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rubek](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@Rubek](https://phaser.discourse.group/u/Rubek)\
**Post date:** [April 8, 2020, 3:46pm UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/1 "2020-04-08T15:46:47Z")

</div>

I am a complete beginner to phaser. I look forward to making games using phaser.

I have tried many times but I don’t know why I can’t add image or sprite to my game. But if i add some web links then image gets added.  
Please help me. And what is assets? Should image files be stored in assets?

---

<div class="post-metadata">

**Author:** ![BlunT76](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/blunt76/32/1454_2.png) [@BlunT76](https://phaser.discourse.group/u/BlunT76)\
**Post date:** [April 8, 2020, 4:45pm UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/2 "2020-04-08T16:45:20Z")

</div>

Hi,  
Show us your code please, and how do you launch the game?

---

<div class="post-metadata">

**Author:** ![Rubek](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@Rubek](https://phaser.discourse.group/u/Rubek)\
**Post date:** [April 11, 2020, 3:05pm UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/3 "2020-04-11T15:05:44Z")

</div>

Thanks for trying to help me…

This is my game.js code  
const gameState = {  
}  
function preload(){  
this.load.image(‘pixel’, ‘assets/pixel.png’);  
this.load.image(‘background’, ‘assets/background.jpg’);

}  
function create(){  
this.add.image(0,0,‘background’),  
gameState.circle =this.add.sprite(50,50,‘pixel’)  
gameState.cursors = this.input.keyboard.createCursorKeys()  
}  
function update(){  
if (gameState.cursors.down.isDown){  
gameState.circle.y +=2;  
}  
if (gameState.cursors.up.isDown){  
gameState.circle.y -=2;  
}  
if (gameState.cursors.left.isDown){  
gameState.circle.x -=2;  
}  
if (gameState.cursors.right.isDown){  
gameState.circle.x +=2;  
}  
}  
const config ={  
height:650,  
width:700,

scene: {  
preload,  
create,  
update,  
}  
}  
const game = new Phaser.Game(config);

My folder structure is like:  
my\_game-- game.js, assets  
assets-- background.jpg, pixel.png

I have my images saved in assets file. But it won’t work. Why?

Instead I see this image ![Screenshot_1](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/76fbfd2dded3a7c3e016622418ed9b6d23a12c72.png)

---

<div class="post-metadata">

**Author:** ![jjcapellan](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jjcapellan/32/542_2.png) [@jjcapellan](https://phaser.discourse.group/u/jjcapellan)\
**Post date:** [April 11, 2020, 4:08pm UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/4 "2020-04-11T16:08:24Z")

</div>

Hi,  
You must indicate the relative path to your web page.  
Example:

```javascript
root_folder
│ index.html    
│
└───my_game
│ │ game.js
│ │
│ └───assets
│ │ background.png
│ │ pixel.png

```

In this example **index.html** is in the root folder, so the path to load assets is: `my_game/assets/`

Regards.

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [April 11, 2020, 4:33pm UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/5 "2020-04-11T16:33:10Z")

</div>

Are you running the code from a local web server?

---

<div class="post-metadata">

**Author:** ![Rubek](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@Rubek](https://phaser.discourse.group/u/Rubek)\
**Post date:** [April 12, 2020, 4:02am UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/6 "2020-04-12T04:02:42Z")

</div>

no i just downloaded phaser.min.js code and wrote index.html code

---

<div class="post-metadata">

**Author:** ![Rubek](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@Rubek](https://phaser.discourse.group/u/Rubek)\
**Post date:** [April 12, 2020, 4:03am UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/7 "2020-04-12T04:03:38Z")

</div>

my\_game is the root folder for me and inside it i have index.html, game.js and assets?

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [April 12, 2020, 8:03am UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/8 "2020-04-12T08:03:26Z")

</div>

See the [Getting Started with Phaser 3](http://phaser.io/tutorials/getting-started-phaser3) tutorial. You must run your game from a local web server.

---

<div class="post-metadata">

**Author:** ![Rubek](https://avatars.discourse-cdn.com/v4/letter/r/d07c76/32.png) [@Rubek](https://phaser.discourse.group/u/Rubek)\
**Post date:** [April 12, 2020, 3:22pm UTC](https://phaser.discourse.group/t/i-cant-add-image-neither-background-images-nor-sprites/5825/9 "2020-04-12T15:22:14Z")

</div>

Okay. Thanks