[SOLVED] I cannot get anything to load onto the canvas with the create function in Phaser 3

I cannot get anything to load onto the canvas with the create function in Phaser 3

I cannot get the images to preload

I have tried converting it to a url, I have tried copying the to the file in the project folder and I have tried just putting the file name.

function preload(){
  this.load.image('sky', 'assets/sky.png');
  this.load.image('ground', 'assets/platform.png');
  this.load.spritesheet('dude', 'assets/dude.png');
  this.load.image('star', 'assets/star.png');
} // preloads all of the files I will need to make the game
function create() {
  this.add.sprite(200, 200, 'star');
} // applies the files 
function update() {

}// update every frame




var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  backgroundColor: '#FF0000',
  physics: {
    default: 'arcade',
    arcade: {
      gravity: {y:200},
      debug: false
    }
  },
scene: {
  preload,
  create,
  update
},

} // configures the game 

var game = new Phaser.Game(config);

I would like to successfully display an image on the canvas, but it only shows a black box with some green lines on it. Any tips on how to fix this or what I am missing would be much appreciated, thanks.



    function preload() {
      this.load.image('sky', 'file:///home/chronos/u-fc7808c01e889e74148d1013b69f0a2241def976/Downloads/testprogram-atom.js/assets/sky.png');
      this.load.image('ground', 'assets/platform.png');
      this.load.spritesheet('dude', 'assets/dude.png');
      this.load.image('star', '/home/jojobinks/Desktop/testprogram-atom.js/star.png');
    }
    function create() {
      this.add.image(0, 0, 'sky');
    }
    function update() {

    }




    var config = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      backgroundColor: '#FF0000',
      physics: {
        default: 'arcade',
        arcade: {
          gravity: {y:200},
          debug: false
        }
      },
    scene: {
      preload,
      create,
      update
    },

    }

    var game = new Phaser.Game(config);
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.16.2/dist/phaser-arcade-physics.min.js"></script>

Solution

Open your browsers Dev Tools and look at the Network requests. Is it actually loading the file in? Or do you have 404 errors there? Also, you can't load from file:// and your game must be running from a web server. If you're just opening the index.html into your browser, it won't work. Please follow the Getting Started Guide on the Phaser site for more details.