Is there a way to load images into a loading scene in Phaser 3? My images keep failing to load.

[syntaxidermy]

My image keeps displaying as a green box with a cross through it, even though I'm nearly exactly the same loader event code given in the examples given here and here.
 

My code looks something like this, but for some reason the image is always displayed as a geen box with a line through it, as though it failed to load the image correctly. Any insights as to what this might be? I promise it's not a typo!

var config = {
    type: Phaser.AUTO,
    width: 1000,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        pack: {
            files: [
                { type: 'image', key: 'loading', url: 'assets/laptop.png' }
            ]
        }
    }
};

var game = new Phaser.Game(config);

function preload ()
{
    loading = this.add.image(500, 300, 'loading');

    var progress = this.add.graphics();

    this.load.on('progress', function (value) {

        progress.clear();
        progress.fillStyle(0xffffff, 1);
        progress.fillRect(300, 270, 800 * value, 60);

    });

    this.load.on('complete', function () {

        progress.destroy();
        loading.destroy();

    });

    //...load other files

}

. 

[cesco_p]

I would suggest you load your images the same way as in the official tutorial

function preload()
{
// in this function you LOAD all files images and so on
// first parameter is the key, second the path to your png
this.load.image('loading','assets/laptop.png')
}

function create()
{
// in this function you actually add the images to the scene
// with the next line you actually add the image to your scene
this.add.image(500, 300, 'loading');
}

I got the same error when the file was unable to load for a different reason, i.e. No access right to the folder

[samme]

Check the browser console.

[syntaxidermy]

Thanks for the reply samme, the issue is that I'm trying to load an image onto the loading scene, because my game has a lot of image files to load before the create/update functions can run.  The tutorials seem to suggest loading the files inside of the game config variable, but I haven't managed to get this to work.

[blackhawx]

I managed to get it working on my end, but with a slightly different structure.  I'm using multiple scenes, not just one, as the demo above entails. But in either case, here is whats working for me...

 

class preloadScene extends Phaser.Scene {
    constructor() {
        super({
            key: 'preLoadScene',
            active: true,
            physics: {
                default: 'arcade',
                arcade: {
                    debug: true
                }
            },
            pack: {
                files: [
                    {
                        type: 'image',
                        key: 'image01',
                        url: 'knife.png'
                    }
                ]
            }
        });
    }

    preload() {

        this.add.image(100, 0, 'image01').setOrigin(0);
    }

}


//my configuration is using the a loader property to set the default path to my image assets...

const config = {
...
loader: {
        baseURL: 'game/media'
    },
scene: [preloadScene, playGame]
...
}

...and my knife displays as my pre-loading sequence takes place...

For dev's still stuck, there could be an issue with how the relative path is defined in the gaming environment...