Phaser, Image Replaced By Green Square, No Errors, JS

Question

I followed many Phaser tutorials online with precision, and made sure the path to the image is adequate, yet I find myself stuck with a green square with a dash across it in place for my image green square .

I have suspicions that perhaps it's the way I have my testing server set up, I am using parcel for this. I've tried many implementations of loading images using Phaser's preLoad() function, but even the simplest one this.load.image('testing','../../assets/user/body/moveRightAtlas.png'); (in preLoad) and var testing=this.add.sprite(400,400,'testing'); (in create) still prints the square. For the path, I've tried absolute path and still does not work. Here is how my directories are set up. directories . My question is, what am I doing incorrect? I'm an absolute noob in Phaser, so any help is deeply appreciated, thanks.

(EDIT: for the directories screenshot I accidently said moveRight0, I meant moveRightAtlas.png)

After reading more, it seems that the image exists but the web server I am using to test the game can't seem to load it. So the issue is likely on the webserver. I am using parcel.

Answer 1

The path should be relative to the HTML file. so probably:

this.load.image('testing','assets/user/body/moveRightAtlas.png');

Answer 2

You should probably move the assets directory inside your src and then go from there.

Here's how this samme's repository for a working parcel setup is doing the imports:

[...]
    import images from './assets/*.png';
[...]
    this.load.image('space', images.space);
[...]

In your case it'd probably be something like:

[...]
     import moveRightAtlas from './assets/user/body/moveRightAtlas.png'; 
[...]
     this.load.image('testing', moveRightAtlas);
[...]

Check also its README for a plugin to copy the assets.