Can't load images

Phaser 3
1

I can’t load images for my phaser game? This is the problem I am trying to solve but I don’t know whatt now what mistake I have done.

This is my index.html code,

Screenshot_1

And this is game.js code,

function preload() {
this.load.image('plant', 'plant.png');
}
function create() {
this.add.image(50,50, 'plant');
}
function update() {
}
const config = {
type: Phaser.AUTO,
height: 600,
width: 600,
background: 0x123456,
scene: {
    preload: preload,
    create: create,
    update: update,
}
}
const game = new Phaser.Game(config);

The google console says, "Access to XMLHttpRequest at ‘file:///C:/wamp64/www/rungame/plant.png’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

Also, there are other two messages by the console,

Screenshot_3
Screenshot_31364×174 17.5 KB

What wrong did I do? Please help

2

Are you running your game on a local web server?
It seems the browse is blocking Cross-Origin requests. You need to be on https:// for loading files from your device’s storage.

3

Thanks, yes it works. But, instead of https, i have http, does it matter.
And why images weren’t loading without local webserver?

4

The main difference between http and https is that in https, the data is encrypted and then transferred. So, it might not affect the game, but if you want to make transactions or handle sensitive information , then https is preferred.
And the images were not loading without local webserver because of security reasons. Otherwise any javaScript file will be able to read and write on you device.

5

The first part of the Getting Started tutorial explains this.

For local development, it really shouldn’t matter whether you’re using HTTP or HTTPS. However, HTTPS is sometimes more restrictive and online hosts will almost certainly serve your game over HTTPS, so it helps to use it in development to ensure you won’t run into issues in the future.