Image not displaying

[kray]

I have two images that I want to display, but there's some error. I'm just getting green boxes in place of the images. I checked the paths. They are correct. What might be the issue?

I have attached a screenshot.

 

You can view the screenshot of the console here : https://www.dropbox.com/s/1puzi0mci2m1535/Capture.PNG?dl=0

My JS code:

 

var GameState = {    preload: function() {        this.add.image('bg','Assets/Images/stormy-sky.png');        this.add.image('sea','Assets/Images/sea.png');        this.add.image('ship','Assets/Images/Ship.png');    },    create: function() {        this.background = this.game.add.sprite(0,0,'bg');        this.sea = this.game.add.sprite(0,300,'sea');    },    update: function() {    }};var game = new Phaser.Game(640,360,Phaser.AUTO);game.state.add('GameState',GameState);game.state.start('GameState');

[stauzs]

can you post console output?

press F12 -> Reload Browser

[kray]

The console doesn't show any error.
 

View the image here : https://www.dropbox.com/s/1puzi0mci2m1535/Capture.PNG?dl=0

[valueerror]

it probably should be:

 

game.add.image  instead of this.add.image    (this referrs to "GameState" not "game" right?

[kray]

I was following this tutorial https://software.intel.com/en-us/android/articles/how-to-make-a-toddlers-game-with-the-phaser-html5-framework.

 

I changed it to game.load.image() and it works fine now. Thanks

But even the code of the tutorial was working fine. I don't understand.