the image does not appear in the game phaser

Question

Does anyone know how to solve the image not appearing on the page, I use javascript to call the image into the phaser game

preload() {
   //example calling image
   this.load.image("kanvas", "../assets/kanvas.png");
}

create() {
   this.add.image(200, 200, "kanvas");
}

Error in console :

Access to XMLHttpRequest at 
file:///F:/Hafid%20Suhanizar/KULIAH/SEMESTER%206/MAGANG/PHASER/assets/kanvas.png'
from origin 'null' has been blocked by CORS policy: Cross origin requests are
only supported for protocol schemes: http, data, chrome, chrome-extension,
chrome-untrusted, https.

Answer 1

CORS policy (Cross-Origin Resource Sharing) is there to avoid some website loading stuff from another website without permission. It's an HTTP Header that determine which website is allowed to download the external resource (Only itself will be allowed if the header is not set)

From the error message, it seems that you're trying to run your project using local files.

If you want it to work, you'll need to setup a local server: For that I suggest you to install XAMPP: It's really easy to use : you just install it, run XAMPP control pannel and click start on Apache. Then just enter localhost in your browser.

You will then be greeted with a webpage called "Welcome to XAMPP". To "run" your project, put your files in the htdocs folder (C:\xampp\htdocs by default on Windows). This is the "root" folder for your web pages, meaning that if you create a file like C:\xampp\htdocs\folder\file.html, it will be accessible at localhost/folder/file.html

Here's a more detailed guide of how to install and setup XAMPP [archive]

If you have other questions about XAMPP, please let me know.