为什么在 Phaser 中无法加载图像？

如何解决为什么在 Phaser 中无法加载图像？

我正在关注此tutorial 我按照说明做了一切，但我的图片没有加载，我得到了这个：

我的代码：

main.js：

/** @type{import{"../libs/phaser"}} */


var config = {
    type: Phaser.AUTO,width: 800,height: 600,scene: {
        preload: preload,create: create,update: update
    }
};

function preload ()
{
    this.load.image('sky','assets/sky.png');
    this.load.image('ground','assets/platform.png');
    this.load.image('star','assets/star.png');
    this.load.image('bomb','assets/bomb.png');
    this.load.spritesheet('dude','assets/dude.png',{ frameWidth: 32,frameHeight: 48 }
    );
}

function create ()
{
    this.add.image(400,300,'sky'); 
    this.add.image(400,'star');
}

function update ()
{
}

var game = new Phaser.Game(config);
game.state.add('GameState',GameState);
game.state.start('GameState')

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./libs/phaser.js"></script>
    <script src="main.js"></script>
</body>
</html>

我的项目结构：

我尝试过的：

在 chrome/edge/firefox 上运行
将 .png 移到文件夹外

我想这不是代码的问题，所以我不知道它在哪里以及如何解决它。这是我的错误：