Why isn't phaser.js able to load an image from a third-party domain?

- 1 answer

Ad

I'm learning phaser.js, and I cant even load the image.

Here is the code:

// 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');

And here is the image that clearly shows that it doesen't load:

enter image description here

Ad

Answer

Ad

Your image isn't showing up because Phaser can't make use of cross-origin images, so all images need to be loaded from the same origin. In practice, this means that instead of loading the image directly from gstatic.com, you need to first download the image to your computer, then move it to your Phaser project folder and load it using a relative path.

For more information, please see the Wikipedia article on the Same-Origin Policy.

Ad
source: stackoverflow.com
Ad