# Problem to show images

**URL:** <https://phaser.discourse.group/t/problem-to-show-images/5833>\
**Category:** Phaser 3\
**Created:** [April 8, 2020, 7:15pm UTC](https://phaser.discourse.group/t/problem-to-show-images/5833 "2020-04-08T19:15:27Z")\
**Posts on this page:** 7\
**Page:** 2

<div class="post-metadata">

**Author:** ![NowakSotto](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nowaksotto/32/3088_2.png) [@NowakSotto](https://phaser.discourse.group/u/NowakSotto)\
**Post date:** [April 9, 2020, 11:42pm UTC](https://phaser.discourse.group/t/problem-to-show-images/5833/21 "2020-04-09T23:42:51Z")

</div>

Well, i started all from the begin…nothing change…put the new project in desktop…and yet the green squares for image.

---

<div class="post-metadata">

**Author:** ![NowakSotto](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nowaksotto/32/3088_2.png) [@NowakSotto](https://phaser.discourse.group/u/NowakSotto)\
**Post date:** [April 10, 2020, 3:38am UTC](https://phaser.discourse.group/t/problem-to-show-images/5833/22 "2020-04-10T03:38:51Z")

</div>

@ReydVires @UltimateProGrammer

Ok, thanks for all the help, by testing solved the problem, but now i have a question, whats the “Dist” directory, whats its purpose ?

Solution: Put my assets folder inside the dist folder.

---

<div class="post-metadata">

**Author:** ![ReydVires](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/reydvires/32/939_2.png) [@ReydVires](https://phaser.discourse.group/u/ReydVires)\
**Post date:** [April 10, 2020, 10:08am UTC](https://phaser.discourse.group/t/problem-to-show-images/5833/23 "2020-04-10T10:08:58Z")

</div>

Are you using specific template for Phaser 3?  
If youre familiar with bundler like webpack, thats folder holding some compiled script to be single bundle `.js`  
And the index.html you run with maybe refering to that folder, thats maybe the problem you get.

---

<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 10, 2020, 10:11am UTC](https://phaser.discourse.group/t/problem-to-show-images/5833/24 "2020-04-10T10:11:42Z")

</div>

Hi,  
While in development you usually put all yours files in the src folder

```javascript
src
  |- assets
  |- scenes
  |- player
  index.js

```

And with your dev server, all files inside src are served to your browser, usually with the command: npm start  
When you want to export your game you can run the command: npm run build  
This will create a dist folder containing your game files ready to be uploaded on a production server.

```javascript
dist
src
  |- assets
  |- scenes
  |- player
  index.js

```

Look at this template for phaser 3:

> **[photonstorm/phaser3-project-template](https://github.com/photonstorm/phaser3-project-template)**
>
> A Phaser 3 Project Template. Contribute to photonstorm/phaser3-project-template development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![NowakSotto](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nowaksotto/32/3088_2.png) [@NowakSotto](https://phaser.discourse.group/u/NowakSotto)\
**Post date:** [April 10, 2020, 1:37pm UTC](https://phaser.discourse.group/t/problem-to-show-images/5833/25 "2020-04-10T13:37:20Z")

</div>

oh, make sense now, so the dist folder is server side, that explain why i get green square.  
When i organized the files i put all in the src folder.

But for the final purpose, when i go upload my game anywhere to others play, if i only build it and share the created final file go be all things ok ?

---

<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 10, 2020, 1:41pm UTC](https://phaser.discourse.group/t/problem-to-show-images/5833/26 "2020-04-10T13:41:27Z")

</div>

Yes, when i upload my game, after ‘npm run build’ i just upload the content of dist folder.  
I really suggest you to use the phaser-template

---

<div class="post-metadata">

**Author:** ![NowakSotto](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nowaksotto/32/3088_2.png) [@NowakSotto](https://phaser.discourse.group/u/NowakSotto)\
**Post date:** [April 10, 2020, 2:44pm UTC](https://phaser.discourse.group/t/problem-to-show-images/5833/27 "2020-04-10T14:44:09Z")

</div>

Thanks man.

i go make the changes using the template as example

[Previous page](https://phaser.discourse.group/t/problem-to-show-images/5833.md?page=1)