One of the first things I am is asked by developers learning phaser is How to add an image in phaser. It is really easy, and a two-step process, loading the image into the library and then placing it on stage. I’ve stretched it out here to a 4 step process for the absolute beginner.
Step 1. Download the basic template
rename the template folder to your project name (like ImageTest for example) and open the folder with your favorite editor.
Step 2. Add an image to the project
Make a folder inside the project and add any images you want to load inside
Step 3. Load the image into the library.
Place this code inside the preload function inside the stateMain.js file
game.load.image("monster","images/monster.png");
The game.load.image works like this:
game.load.image(unique_key,path_to_image);
Step 4. Place the image on the canvas
use the game.add.sprite code inside the create function:
game.add.sprite(100,200,"monster");
game.load.sprite works like this:
game.add.sprite(x,y,unique_key);
You can also copy and paste these from the snippets library