Chrome loading sprites with Pixi.js

Question

Chrome version 55.0.2883.95 doesn't seem to be able to load in sprites using Pixi.js. However, Firefox version 50.1.0 seems to be working just fine with the following script.

The Code:

<!doctype html>
<meta charset="utf-8">
<body>
<script src="pixi.js"></script>
<script>

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(256, 256);
document.body.appendChild(renderer.view);

PIXI.loader.add("cat.png").load(setup);

function setup() {
  var cat = new PIXI.Sprite(PIXI.loader.resources["cat.png"].texture);

  stage.addChild(cat);

  renderer.render(stage);
}
</script>
</body>

The Folder:

Pixi.js
cat.png
index.html

The Chrome Error:

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///Users/konradwright/Desktop/SO12017/cat.png may not be loaded.
    at Texture.upload (file:///Users/konradwright/Desktop/SO12017/pixi.js:1911:9)
    at TextureManager.updateTexture (file:///Users/konradwright/Desktop/SO12017/pixi.js:16440:27)
    at WebGLRenderer.bindTexture (file:///Users/konradwright/Desktop/SO12017/pixi.js:17108:33)
    at SpriteRenderer.flush (file:///Users/konradwright/Desktop/SO12017/pixi.js:21351:35)
    at WebGLRenderer.render (file:///Users/konradwright/Desktop/SO12017/pixi.js:16896:30)
    at setup (file:///Users/konradwright/Desktop/SO12017/index.html:18:12)
    at MiniSignal.dispatch (file:///Users/konradwright/Desktop/SO12017/pixi.js:7068:18)
    at Loader._onComplete (file:///Users/konradwright/Desktop/SO12017/pixi.js:5414:25)
    at file:///Users/konradwright/Desktop/SO12017/pixi.js:5451:24
    at next (file:///Users/konradwright/Desktop/SO12017/pixi.js:6610:17)

score 4 · Accepted Answer · edited May 23 '17 at 12:24

4

In general, you can't load local files asynchronously in Chrome for security reasons.

Instead, you need to run a local server to serve your files.

I personally use Node.js and the http-server module. It's very easy to use. Just install Node.js then open a command prompt. Run

npm install -g http-server

to install the http-server module. If you have permissions issues, try

sudo npm install -g http-server

After that, go to the folder where you want to serve up your website (cd path/to/project/folder). Run

http-server

and it will begin running a server at http://127.0.0.1:8080 a.k.a http://localhost:8080. Enter that into your browser and you'll be good to go.

There are numerous other server solutions out there as well but this one takes almost no work to get it going.

edited May 23 '17 at 12:24

Community

1
1

answered Jan 20 '17 at 20:04

Mike Cluck

31,869
13
80
91

Thank you Mike. Your instructions were good, and I even made a picture tutorial of it. However, I ran into a snag. The instructions failed to complete the task asked of them. Could you review it for me? http://imgur.com/a/xIntM – Konrad Wright Jan 20 '17 at 20:32
@KonradWright Looks like a typical permissions error to me. Try `sudo npm install -g http-server`. – Mike Cluck Jan 20 '17 at 20:36
Thank you Mike! Could you update your answer to reflect the changes? – Konrad Wright Jan 20 '17 at 20:47

score 0 · Answer 2 · answered Sep 29 '17 at 02:51

Simple solution that may work is "Web Server for Chrome" app. You start it up, choose the folder wishing to work with and go to URL (like 127.0.0.1:port you chose)

It is a simple server and cannot use PHP but for simple work, might be your solution:

https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

Chrome loading sprites with Pixi.js

2 Answers2

Linked