Progress bar during Config load

Phaser 3
3

Maybe another way to approach this is to load an image early like what you suggested in another post (Change the Black background loading screen to background image (Phaser) - #2 by samme). I tried this and it seems to work but the image is a neon green box with diagonal line - which represents image not properly loaded in Phaser. I redacted the url below but I did test my url in a new browser tab that it works.

var sceneConfig = {
    preload: preload,
    create: create,
    update: update,
    pack: {
        files: [
            { type: 'image', key: 'sonic', url: '/images/energybar.png' }
        ]
    }
};

var config = {
	
    type: Phaser.AUTO,
        //backgroundColor: 0x003500,
    parent: 'phaser-game',
    scene: {
	sceneConfig,    
        preload: preload,
        create: create,
        update: update
    },
    dom: {
        createContainer: true
    },    
  scale: {
    mode: Phaser.Scale.NONE,
    autoCenter: Phaser.Scale.CENTER_BOTH
  },    
    width: 1200,  
    height: 600
	    
};

In my preload I added this line:

const img = this.add.image(200, 200, 'sonic');