Loading dynamic images from Internet without preload()

Phaser 3
1

I would like to load images from the Internet and display them after this.load.once()
It was still not working…

Can anyone help to see what is wrong ??

 create() {
        // Dynamically load an image from the internet
        const imageUrl = 'https://example.com/your-image.png';
        this.loadImageFromUrl('bomb', imageUrl);
    }

    loadImageFromUrl(key, url) {
        // Load the image with a specific key from the provided URL
        this.load.image(key, url);

        // Set up the event listener for when the image is loaded
        this.load.once('filecomplete-image-' + key, this.imageLoaded, this);

        // Optionally, handle any load errors
        this.load.on('loaderror', this.loadError, this);

        // Start the loading process
        this.load.start();
    }

    imageLoaded(key) {
        console.log(`Image ${key} loaded successfully!`);

        // Use the loaded image (e.g., add it to the scene)
        this.add.image(400, 300, key);
    }

    loadError(file) {
        console.error(`Error loading ${file.src}`);
    }
2

What happens? It works for me.

https://phaser.io/sandbox/acwQ4XBM

3

Thank you… finally got it working…

I would like to ask, the this.imageLoaded , what else is passed to this callback besides key & this ??

    // Set up the event listener for when the image is loaded
        this.load.once('filecomplete-image-' + key, this.imageLoaded, this);

    imageLoaded(key) {
        console.log(`Image ${key} loaded successfully!`);
        // Use the loaded image (e.g., add it to the scene)
        this.add.image(400, 300, key);
    }
4

Phaser.Loader.Events.FILE_KEY_COMPLETE