如何修复不在 phaser.js 中加载的图像答案

【问题标题】：How to fix images not loading in phaser.js如何修复不在 phaser.js 中加载的图像
【发布时间】：2019-04-26 21:06:24
【问题描述】：

每当我尝试将图像加载到移相器时，它们总是在我的屏幕上显示为绿色框？

我不仅尝试了正常的根文件路径，还尝试了所有可以想象的文件路径，但它仍然无法正常工作？

【问题讨论】：

能否请您发布代码而不是屏幕截图？另外，如果您可以在 JS Fiddle 上创建一个最小示例，它将帮助我们找到问题。
// 设置游戏 const config = { width: 700, height: 700, type: Phaser.AUTO, scene: { preload, create, update, }, }; const game = new Phaser.Game(config); // 全局变量 const gameState = {}; // 资产函数 preload() { this.load.image('ship', 'assets/images/Ship.PNG'); } // 将资源添加到游戏中 function create() { this.add.sprite(50, 50, 'ship'); } // 更新循环函数 update() { }
请使用格式化代码更新您的问题。花点时间阅读并学习如何在 SO 上提出一个好的问题。 stackoverflow.com/help/how-to-ask
我的 'uBlock' 扩展在 Firefox 中阻止了我的图像，所以白名单解决了我的问题 :)

【解决方案1】：

我假设您已经设置了 Web 服务器。您是否查看了开发人员工具并检查是否有任何错误？在 Google Chrome 上，右键单击您的网页并点击检查。导航到控制台选项卡并查找错误。请务必同时记录 XMLHttpRequests，因为这些将指示对所述图像的请求何时已完成（只需单击记录 XMLHttpRequests 复选框）。

上述任何解决方案对您有用吗？对我来说，我使用了一个带有 Python 的简单 HTTP 服务器。我正确引用了我的图像，并且正确托管了我的网络服务器。使用开发人员工具时，没有任何错误消息。我把头撞在墙上好几个小时。由于某种原因，Phaser API 无法从网页中分辨出本地目录 (http://192.168.0.2:8080/) 是什么。

我通过使用以下图片路径解决了我的问题：

'http://192.168.0.2:8080/assets/sky.png'

其中 192.168.0.2 是我托管服务器的本地 IP 地址，而 8080 是我用于通信的端口

除了为每个图像添加冗长的文件路径之外，您还可以结合已有的内容调用 this.load.setBaseURL('http://192.168.0.2:8080') 函数。

例如看下面的代码：

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 200 }
        }
    },
    scene: {
        
        preload: preload,
        create: create
    }
};
var game = new Phaser.Game(config);

function preload ()
{
    console.log('preload');
    this.load.setBaseURL('http://192.168.0.2:8080');
    this.load.image('bombP','bowmb.png');
    this.load.image('einMary','/bowmb.png');
}

function create ()
{
    console.log('create');
    this.add.image(126, 119, 'bombP');
    this.add.image(222,269,'einMary');
    //var s = game.add.sprite(80,0,'einMary');
    //s.rotation=0.219;
}

【讨论】：

【解决方案2】：

我应该从检查以下两点开始：

检查图片是否有正确的文件路径
检查您使用的“密钥”是否正确

【讨论】：