Image Not Displaying in Phaser

[Noaml1]

I'm following the rougelike tutorial and for some reason the preloader images arent displaying.
I load them in the boot state:

preload() {//changed the file names to make it easier to type            this.load.image('preloaderBackground', 'assets/progBarBack.png');            this.load.image('preloaderBar', 'assets/progBar.png');            this.game.state.start('Preloader');        }

and i try to display them here:
 

module RougeLikeClone {    export class Preloader extends Phaser.State{        background: Phaser.Sprite;        preloadBar: Phaser.Sprite;        create() {            this.stage.backgroundColor = "#FF0000"; //just to check            this.background = this.add.sprite(this.game.width / 2 - 250, this.game.height / 2 - 70, 'preloaderBackground');            this.preloadBar = this.add.sprite(this.game.width / 2 - 250, this.game.height / 2 - 70, 'preloaderBar');        }    }} 

I get a red background with a greenoutlined black box when this runs. Whats the problem? (see attatched)

[Noaml1]

Also, it did load correctly once, and then it didn't
i didnt touch the add portion of the code but i tried adding the line 

			this.load.setPreloadSprite(this.preloadBar);

then, even after taking this line out the problem persisted

[rich]

The black/green box means "your image key is correct, but there's no image in the cache for it" which nearly always happens as a result of a load error on the server. I.e. the image isn't in the path specified, or you tried to open the html file locally and not via a server, or something along those lines. Open DevTools in your browser, you'll see the cause there.

[Noaml1]

I checked it out and i get the message "Phaser.Loader fileComplete invalid index 0 "
what does that mean?
I tried retyping the filepath, it worked again once and now im getting the box again :/

[Noaml1]

Played around with it more and i found that as i refresh the page, the images come and go

[rich]

Then it's a race condition - something in your page/set-up is telling the JS to run before the images have had a chance to load. Hence why sometimes it works.

[rich]

In fact this is causing it:

preload() {//changed the file names to make it easier to type            this.load.image('preloaderBackground', 'assets/progBarBack.png');            this.load.image('preloaderBar', 'assets/progBar.png');            this.game.state.start('Preloader');        }

You're changing state before the loader has had a chance to complete. The state.start line should be in the create method, not preload.

[Noaml1]

Yup that was it, thanks!
It's really cool that you're on these forums helping people 

[Ykarhus]

Hi there. I'm getting a problem just like that but I do get the images in a webserver!! Here are the lines:

GET http://localhost/DoodleJumpPhaser/assets/pixel_1.png 404 (Not Found)

assets/dude.png:1 GET http://localhost/DoodleJumpPhaser/assets/dude.png 404 (Not Found)

phaser.js:70272 Phaser.Loader - image[pixel]: error loading asset from URL assets/pixel_1.png

phaser.js:70272 Phaser.Loader - image[hero]: error loading asset from URL assets/dude.png

10phaser.js:67355 Phaser.Cache.getImage: Key "pixel" not found in Cache.

phaser.js:67355 Phaser.Cache.getImage: Key "hero" not found in Cache.

 

What should I do? PLEASE HALP!

[Ykarhus]

Now it's working when I use Safari to see it. But when I go to Chrome it still says I cannot load the image. And now it's saying this:

GET http://localhost/DoodleJumpPhaser/dude.png 403 (Forbidden)

pixel_1.png:1 GET http://localhost/DoodleJumpPhaser/pixel_1.png 403 (Forbidden)

phaser.js:70272 Phaser.Loader - image[hero]: error loading asset from URL dude.png

phaser.js:70272 Phaser.Loader - image[pixel]: error loading asset from URL pixel_1.png

10phaser.js:67355 Phaser.Cache.getImage: Key "pixel" not found in Cache.

phaser.js:67355 Phaser.Cache.getImage: Key "hero" not found in Cache.

 

It's error 403. That's a problem with my browser(Chrome), right?

[LukaszG]

I know it's old but for anyone that ends up here in search for a solution:)

 

If you will encounter the message about `Phaser.Cache.getImage: Key "pixel" not found in Cache.` then check if you start new state with clear cache enabled:) if so change 3rd param to true

this.game.state.start(Level.KEY, true, true);//clear cache

this.game.state.start(Level.KEY, true, false);//keep cache