Html
<html>
<head>
<script src="https://dir.by/example_lib/pixi_js/5.1.6/pixi.min.js"></script>
</head>
<body>
<div>
<canvas id="game-canvas" width="512" height="384"></canvas>
</div>
</body>
<script>
//Create a Pixi Application
let app = new PIXI.Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1,
view:document.getElementById("game-canvas")
});
//load an image and run the `setup` function when it's done
PIXI.loader
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
// Create the cat sprite
let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);
//Add the cat to the stage
app.stage.addChild(cat);
}
</script>
</html>
Error: Access to image at 'file:///D:/my_example_pixijs/images/cat.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.
Пример работает когда файлы (1.html, cat.png) размещены на web server.
Пример не работает когда файлы (1.html, cat.png) размещены у вас на компьютере.
Решение! Чтобы работали у вас на компьютере файлы (1.html, cat.png)
1) Закрываем
Google Chrome
2) В
Windows 10 на рабочем столе нажимаем правой клавишей мыши на иконке
Google Chrome
2) Открыть вкладку
"Shortcut"
3) В
"Target" добавить текст:
--allow-file-access-from-files
Запускаем файл 1.html В Google Chrome
Работает!
Ваши Отзывы ... комментарии ...