为什么phaser.js无法从第三方域加载图像？

Question

我正在学习phaser.js，我甚至无法加载图片。

以下是代码：

// Need state. All game logic goes in state

var GameState = {

    // Load all your images. Thats what the preload function is
    preload : function(){
        //Load Image
    this.load.image( 'background', 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSMxwX5oTml7qBFmUD3vEIzEhqLQfakBVjmkQezA8HKs4KnT-2Q' );

    },

    //Execute after everything is loaded
    create: function(){
        //From top left param = (x,y)
        this.background = this.game.add.sprite(0,0, 'background');

    },

    update: function(){


    }

}

// New Game instance, 3rd parameter WEBGL or CANVAS automatic  GL
var game = new Phaser.Game(640,360,Phaser.automatic);

// add state to game

// First just a name, second par is the actual Object
game.state.add('GameState', GameState);
game.state.start('GameState');

这里的图像清楚地表明它不会加载：

Answer 1

您的图像未显示，因为Phaser无法使用跨原始图像，因此所有图像都需要从同一来源加载。实际上，这意味着您需要先将图像下载到计算机，然后将其移动到Phaser项目文件夹并使用相对路径加载，而不是直接从gstatic.com加载图像。

有关详细信息，请参阅Wikipedia article on the Same-Origin Policy。