Javascript 我无法在Phaser 3中从电脑加载图像

因此，我目前正在使用Phaser为一个学校项目编写一个游戏。我对Phaser非常陌生，我几乎不懂JavaScript。我在网上查阅了很多可能的修复方法，但似乎没有一个能帮我解决问题。我附上了我的代码，以防我遗漏了什么。当我将图像目录更改为图像链接时，它可以正常工作，但不会加载我电脑中的任何图像

var gameState = {}

function preload() {
  this.load.image('monkey', 'https://vignette.wikia.nocookie.net/jungle-thick/images/0/0c/Monky.png/revision/latest?cb=20190826180942');
  this.load.image('full', 'C:/Users/Public/Trash Monkey/Trash Monkey Website/Assets/Images')
  ;
}

function create() {
  var style = {
    fill: '#FFF',
    font: 'Bold 32px Arial'
  }



  gameState.cursors = this.input.keyboard.createCursorKeys();
  gameState.menuBox = this.add.rectangle(200, 250, 150, 80, 0xB5CF16);
  gameState.menu = this.add.text(147.5, 231, 'START', style);

  gameState.menuBox.setInteractive();

  gameState.menuBox.on('pointerup', function() {
    gameState.menuBox.x = 600
    gameState.menu.x = 600
    if(gameState.randomizer == 0) {
      gameState.monkey.x = 200;
      gameState.monkey.y = 0;
    }
    });
      gameState.randomizer = Math.floor(Math.random());
      if(gameState.randomizer == 0) {
        gameState.monkey = this.add.sprite(2000, 0, 'monkey');
        }
    gameState.fullHealth = this.add.sprite(300, 37.5, 'full');
}

function update() {
  if(gameState.randomizer == 0) {
    gameState.monkey.y += 3;
    if (gameState.cursors.right.isDown) {
      gameState.monkey.x = 300;
    }
    if (gameState.cursors.left.isDown) {
      gameState.monkey.x = 100;
    }
    if (gameState.cursors.up.isDown) {
      gameState.monkey.x = 200;
  }
    if (gameState.cursors.down.isDown) {
      gameState.monkey.y += 15;
  }
    if (gameState.monkey.y >= 500) {
      gameState.monkey.y = 0;
  }
  }
}

var config = {
    type: Phaser.AUTO,
    width: 400,
  height: 500,
  backgroundColor: "#2191E8",
  parent: 'my-game',
  scene: {
    preload,
    create,
    update
    }
}

var game = new Phaser.Game(config);

---

你需要调整你的发展方式。问题的关键在于，您试图通过浏览器的JavaScript上下文在本地计算机上加载文件，但由于安全问题，这显然是不允许的

见：

解决方案是使用静态服务器（如Apache、NGINX、node.js等）为您的项目提供服务。哪一个都不重要。您不需要复杂的解决方案。您只需要一些能够在本地机器上为您的工作服务的东西，这样您就可以很好地处理浏览器的安全问题

---

处理使用静态服务器需求的最直接的方法是使用集成开发环境（IDE），许多人都会这样做。再说一次，哪一个并不重要，只要它能为你的内容服务。它们都有用于静态项目的项目模板，并且非常容易设置。具有Live Server扩展，只需右键单击即可为文件夹提供服务。

您如何运行此代码？浏览器中的URL是否显示类似于

file://c:/my/coool/project/index.html的内容，还是显示
http://localhost:3000/mycoolproject/index.html
？
http://
vs
文件：//
很重要。我正在通过一个文件运行此操作。问题的关键是您试图通过服务器机制，而不是通过服务器机制。要加上零，浏览器/js不能只查看用户的本地文件系统，这将是一个巨大的安全风险。相反，您可以使用FileReader API并通过browserI上传要使用的文件。我建议您使用VSCode的Live Server扩展。安装后，只需打开其中的文件夹，右键单击文件，然后单击“使用Live Server打开”。@IceMetalPunk请随意编辑或添加到我的答案中。我创建这个社区wiki是因为它对于一个具体但广泛的问题是一个非常松散的答案。最简单的答案是“不要使用
文件：//
，通过服务器托管您的资产”，但实际上这样做有很多解决方案的途径。