Image from origin 'file://' has been blocked from loading

vmars316 · January 9, 2016

Hello & Thanks ,

windows 10 , x64

I am learning pixi.js starting here:

goose.ninja/2015/08/29/pixi-js-tutorial-getting-started/

But i am having some probs , see below code .

Here is the code:

<!doctype html><html><head>    <meta charset="utf-8">    <title>Pixi.js goose.png</title>    <style>        body {            margin: 0;            padding: 0;            background-color: #000;        }    </style></head><body>    <script src="C:\pixi.js\bin\pixi.min.js"></script>    <script>//////////////// var renderer = PIXI.autoDetectRenderer(160, 144);// Set the background color of the renderer to a baby-blue'ish colorrenderer.backgroundColor = 0x3498db;// Append the renderer to the body of the pagedocument.body.appendChild(renderer.view);// Create the main stage for your display objectsvar stage = new PIXI.Container();//////////////// // Add our image as a spritevar goose = new PIXI.Sprite.fromImage("file:///C:/pixi.js/learningPixi-master/examples/images/goose.png");// Set the anchor in the center of our sprite goose.anchor.x = 0.5;goose.anchor.y = 0.5;// Position our goose in the center of the renderergoose.position.x = renderer.width / 2;goose.position.y = renderer.height / 2;// Add the goose to the stagestage.addChild(goose);////////////////// Start animatinganimate();function animate() {    requestAnimationFrame(animate);////////////////     // Rotate our goose clockwise    goose.rotation += 0.1;    // Rotate our goose counter-clockwise    // goose.rotation -= 0.1;////////////////    // Render our container    renderer.render(stage);} ////////////////     </script></body></html>

This code works fine in ie 11 , ( goose rotates as scripted )

but in Chrome Version 47.0.2526.106 m

no goose shows up .

But i do get this error msg from console :

" Image from origin 'file://' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'null' is therefore not allowed access. "

Can anyone tell me how to fix this ?

Thanks...Vern

elizawolfe · January 9, 2016

Try changing:

var goose = new PIXI.Sprite.fromImage("file:///C:/pixi.js/learningPixi-master/examples/images/goose.png");

to:

var goose = new PIXI.Sprite.fromImage("C:/pixi.js/learningPixi-master/examples/images/goose.png");

Also, it'd probably be better to use relative paths than absolute paths.

nmiguelmoura · January 9, 2016

Hi,

Chrome blocks the image file for security reasons. Place the files on a web server or run them in a local server and everything should work fine. In alternative, use Canvas Renderer instead of webGL.

Firefox and Safari don't have this restriction.

ivan.popelyshev · January 9, 2016

How to setup your own web-server fast. Donwload x32 msi installer from nodejs.org/en/downloads/ , install it, open the folder with your website, "file"->"open command line here", type "npm install -g http-server". Now, every time you want to start the web-server you have to open command line and type "http-server -c-1". Server will start at localhost:8080 and caching will be disabled ("-c-1" thing).

Please dont use absolute windows paths, "C://" is a heresy.

dominate · January 9, 2016

I guess that you just try things and do not want to bother with server. Yo do not need indeed.

Close all your Chrome instances, then just start new Chrome instance with the option: chrome.exe --allow-file-access-from-files

ivan.popelyshev · January 9, 2016

I guess that you just try things and do not want to bother with server. Yo do not need indeed.
Close all your Chrome instances, then just start new Chrome instance with the option: chrome.exe --allow-file-access-from-files

Pfff, just install Chrome Canary and use it for that stuff, that way you wont make your browsing insecure.

Also http-server is the simple way that doesnt have disadvantages.

AshleyScirra · January 9, 2016

You should run a web server for testing. For security reasons, some browsers treat files on disk as if each file came from a different domain. CORS (Cross Origin Resource Sharing) is the security mechanism that allows resources from different origins to be used, but the default is that resources from other origins are blocked (hence "blocked from loading by Cross-Origin Resource Sharing"). The easiest way around this is to test with your own local server, and the browser will understand that everything comes from the same origin. If you don't run your own server you will continually run in to problems with images, audio, video and more.

vmars316 · January 9, 2016

Thanks guys ,

var goose = new PIXI.Sprite.fromImage("file:///C:/pixi.js/learningPixi-master/examples/images/goose.png");

I am a senior citizen (10 years +) so I look for the method most simple to me:

Tried making a shortcut :

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --allow-file-access-from-files"

But got this error msg :

The name "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe --allow-file-access-from-files"

specified in the Target box is not valid. Make sure the path and filename are correct.

Turns out the solution works , but I had the " in the wrong place .

Should be :

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

I scoured the web some more , and found this :

http://www.ghacks.net/2013/10/06/list-useful-google-chrome-command-line-switches/

Lots of Chrome command line switches mentioned there .

And also created a ~addGoose.html.bat :

echo on

cd C:\Program Files (x86)\Google\Chrome\Application\

chrome.exe --allow-file-access-from-files

pause

Then I just DragDrop the ~addGoose.html file onto Chrome .

.bat solution works well also .

I also tried ChromeCanary , but even with the " --allow-file-access-from-files " it wouldn't allow files .

Anyways , until more errors crop up , I am going with no server .

Thanks again...Vern

ivan.popelyshev · January 9, 2016

Again, INSTALL CHROME CANARY, that way you dont have to do it in your default browser

vmars316 · January 9, 2016

Again, INSTALL CHROME CANARY, that way you dont have to do it in your default browser

I also tried ChromeCanary , but even with the " --allow-file-access-from-files " it wouldn't allow files .

fire7side · January 10, 2016

There's also Brackets, which is a pretty good js editor with a built in server.

And the advice about absolute path is good.

Create a folder " images" or "assets" in the same folder as your index, then use the path:

"images/filename".

Exca · January 11, 2016

You can also setup a local proxy if you dont like installing webserver.

For example Fiddler is free and it has Autoresponder-tab to which you can add following:
regex:http://foo.bar/(.*)
c:\$1

Then just save it, check the enable rules & unmatched request passthrough and you can open url http://foo.bar/pixi.js/learningPixi-master/examples/something.html and each request to that domain is mapped to disk.

vmars316 · January 11, 2016

I was wondering if something like this would work ,

Load image into html code <img id="truth02id" name="truth02png" src="truth02.png">

and the try to pass it to js , but i'm not sure how to code it .

PIXI.Sprite.fromImage(document.getElementById(

Am i close ?

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Pixi.js goose.png</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
        }
    </style>
</head>
<body>
<div id="images">
<br><img id="truth02id" name="truth02png" src="truth02.png">
</div>
<br>

    <script src="C:\pixi.js\bin\pixi.min.js"></script>
    <script>
    
////////////////
 var renderer = PIXI.autoDetectRenderer(600, 400);
 
// Set the background color of the renderer to a baby-blue'ish color
renderer.backgroundColor = 0x3498db;
 
// Append the renderer to the body of the page
document.body.appendChild(renderer.view);

loader
  .add(document.getElementById("truth02id").src = "truth02.png")
  .load(setup); 
// Create the main stage for your display objects
var stage = new PIXI.Container();

//////////////// 
// Add our image as a sprite   document.getElementById 
var truth02 = new PIXI.Sprite.fromImage(document.getElementById("truth02id").src = "truth02.png");
 
// Set the anchor in the center of our sprite 
truth02.anchor.x = 0.5;
truth02.anchor.y = 0.5;
 
// Position our truth02 in the center of the renderer
truth02.position.x = renderer.width / 2;
truth02.position.y = renderer.height / 2;
 
// Add the truth02 to the stage
stage.addChild(truth02);
////////////////

// Start animating
animate();
 
function animate() {
    requestAnimationFrame(animate);
 
////////////////
     // Rotate our truth02 clockwise
    truth02.rotation += 0.1;
 
    // Rotate our truth02 counter-clockwise
    // truth02.rotation -= 0.1;
////////////////
 
    // Render our container
    renderer.render(stage);
} 
//////////////// 
    </script>
</body>
</html>

ivan.popelyshev · January 12, 2016

1. Install some web-server, I already told you that, and I'll repeat that in every message. Do it proper way. No one develops HTML5 application without a web-server, its just you being lazy.

2. fromImage wont work, but that will:

var texture = PIXI.Texture.fromCanvas(document.getElementById("stuff"));

var sprite1 = new PIXI.Sprite(texture);
var sprite2 = new PIXI.Sprite(texture);

vmars316 · January 12, 2016

14 hours ago, ivan.popelyshev said:
1. Install some web-server, I already told you that, and I'll repeat that in every message. Do it proper way. No one develops HTML5 application without a web-server, its just you being lazy.

2. fromImage wont work, but that will:
var texture = PIXI.Texture.fromCanvas(document.getElementById("stuff"));

var sprite1 = new PIXI.Sprite(texture);
var sprite2 = new PIXI.Sprite(texture);

Thanks Ivan ;

But that whole server thing (i tried it in panda once) is confusing to me .

I want to run the code in exactly the same configuration that a user would use .

It is much simpler for me to handle .

vmars316 · January 12, 2016

The following code runs fine EXCEPT that it doesn't show the image (truth02.png) .

Quote

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>truth02.png</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #FFFFFF;
}
</style>
</head>
<body>

<br>
<img id="truth02id" name="truth02png" src="images/truth02.png" alt="truth02.png">
<br>
<script src="C:\pixi.js\bin\pixi.js"></script>
<script>
//Aliases
// var
// resources = PIXI.loader.resources,
// Sprite = PIXI.Sprite;

//Create a Pixi stage and renderer and add the
//renderer.view to the DOM
var stage = new PIXI.Container(),
renderer = PIXI.autoDetectRenderer(600, 400);

// Set the background color of the renderer to a baby-blue'ish color
renderer.backgroundColor = 0x3498db;
document.body.appendChild(renderer.view);

var texture02 = PIXI.Texture.fromCanvas(document.getElementById("truth02id"));

var sprite02 = new PIXI.Sprite(texture02);

PIXI.loader
.add("truth02")
.load(setup);
//Define any variables that are used in more than one function

function setup() {
sprite02.y = 96;
stage.addChild(sprite02);

//Start the game loop
gameLoop();
}
function gameLoop(){
//Loop this function 60 times per second
requestAnimationFrame(gameLoop);
//Move the sprite02 1 pixel per frame
sprite02.x += 1;
//Render the stage
renderer.render(stage);
}
</script>
</body>
</html>

In chrome I get the following errors:

index.js:225
Pixi.js 3.0.9 - ✰ WebGL ✰ http://www.pixijs.com/ ♥♥♥

Resource.js:420XMLHttpRequest cannot load file:///C:/pixi.js/bin/httppixijs.github.io/truth02. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.Resource._loadXhr @ Resource.js:420
WebGLRenderer.js:433Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///C:/pixi.js/bin/httppixijs.github.io/images/truth02.png may not be loaded.Resource._loadXhr @ Resource.js:420
256~cat-source-WIP-experiment.html:1 [GroupMarkerNotSet(crbug.com/242999)!:94F8A90B]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
~cat-source-WIP-experiment.html:1 WebGL: too many errors, no more errors will be reported to the console for this context.

mattstyles · January 12, 2016

15 hours ago, ivan.popelyshev said:

1. Install some web-server, I already told you that, and I'll repeat that in every message. Do it proper way. No one develops HTML5 application without a web-server, its just you being lazy.

Ivan has already explained how to fix this.

mattstyles · January 12, 2016

39 minutes ago, vmars316 said:

Thanks Ivan ;

But that whole server thing (i tried it in panda once) is confusing to me .

I want to run the code in exactly the same configuration that a user would use .

It is much simpler for me to handle .

Just realised you did reply, but the above quote is wrong. By using a server you are testing it in the same way a user would.

ivan.popelyshev · January 12, 2016

remove the loader. PIXI.loader wont work at all in that configuration.

vmars316 · January 13, 2016

Well ,
The good news is , this code works :
var texture02 = PIXI.Texture.fromCanvas(document.getElementById("truth02id"));
var sprite02 = new PIXI.Sprite(texture02).

Here is a working example :
http://liesandcowpies.com/testMe/~cat-source-WIP-experiment.html
This means that no one can do a "save as" for the page above
and have it run on their computer ,
Unless they specify saveAs "html only" option ,
AND then to run it , they must be connected to internet .

I know what you all mean by "install a local server" ,
but I have been in doubt because I worked a bit with Enchant.js .
And it doesn't need a server to do its magic .

I wonder how Enchant.js does it then .
It works great !
Trouble is , they stopped updating it .
Here is an example of what I mean .
http://liesandcowpies.com/testMe/BenghaziGame-Local.zip
It runs anywhere .

All that said , I am thinking about installing a server .
Some suggested 1)Brackets or 2)jsFiddle .
Another other suggestions ?

Thanks All , for hanging in there .
I do appreciate it .
..Vern

ivan.popelyshev · January 13, 2016

node.js http-server module. You are JS web-developer, and you'll have to use node at the some point in your future anyway.

My quote:

How to setup your own web-server fast. Download x32 msi installer from nodejs.org/en/downloads/ , install it, open the folder with your website, "file"->"open command line here", type "npm install -g http-server". Now, every time you want to start the web-server you have to open command line in desired folder (which can be any) and type "http-server -c-1". Server will start at localhost:8080 (type that in browser) and caching will be disabled (that's why i use "-c-1" option). You can put that command in a .cmd-file if you want, that way you will only need to open that one-line script when you want to start the server.

vmars316 · January 13, 2016

1 hour ago, ivan.popelyshev said:

node.js http-server module. You are JS web-developer, and you'll have to use node at the some point in your future anyway.

My quote:

How to setup your own web-server fast. Download x32 msi installer from nodejs.org/en/downloads/ , install it, open the folder with your website, "file"->"open command line here", type "npm install -g http-server". Now, every time you want to start the web-server you have to open command line in desired folder (which can be any) and type "http-server -c-1". Server will start at localhost:8080 (type that in browser) and caching will be disabled (that's why i use "-c-1" option). You can put that command in a .cmd-file if you want, that way you will only need to open that one-line script when you want to start the server.

I installed 64x msi

and i am at the node.exe command line

node -v gets an error < referenceError "" not defined >

so does everything i enter npm install -g http-server

what do you mean by : mean

< "file"->"open command line here" >

< open command line in desired folder >

In < C:\Program Files (x86)\nodejs >

there is a file called npm.cmd

is this what you mean by < open command line in desired folder >

You will have to be more clear .

i am at the node.exe command line "what next ?".

Please don't string out your answer .

One command per line .

Thanks

mattstyles · January 13, 2016

There are further instructions here, although a google search for installing node on windows will throw up hundreds of hits.

The last time I used windows daily was probably mid-90s but I've run Windows builds for node programs (in Windows 8) without any problems, I simply followed the instructions and installed node.

Once node is installed any instructions you find on its usage are 99% platform-agnostic, i.e. it'll work anywhere.

Pixi can be configured to run from file:// (or locally), it is only the loading of assets that you are struggling with. The point is that (presumably) your users will hit a url and use your application. Installing html (and other files) and then running them in the browser is an odd-step to force your users through, unless you have very very very specific use-cases it is unnecessary. If you wanted someone to download and run your JS application then you'd probably package it up using something like node-webkit or electron or have people run it via node (those packagers I mention simply include node—and some other things—in their bundle).

vmars316 · January 13, 2016

Thanks mattstyles :

Here are the instr :

http://blog.teamtreehouse.com/install-node-js-npm-windows

Installation Steps

Download the Windows installer from the Nodes.js® web site.
Run the installer (the .msi file you downloaded in the previous step.)
Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).
Restart your computer. You won’t be able to run Node.js® until you restart your computer.

Test it!

Make sure you have Node and NPM installed by running simple commands to see what version of each is installed and to run a simple test program:

Test Node. To see if Node is installed, open the Windows Command Prompt, Powershell or a similar command line tool, and type node -v. This should print a version number, so you’ll see something like this v0.10.35.
Test NPM. To see if NPM is installed, type npm -v in Terminal. This should print NPM’s version number so you’ll see something like this 1.4.28

I get as far as this step :

Test Node. To see if Node is installed, open the Windows Command Prompt, Powershell or a similar command line tool, and type node -v. This should print a version number, so you’ll see something like this v0.10.35.

And I get the error: "ReferenceError: node is not defined"

followed by 10 lines of: at repl:1:1 .....................

I don't want to take the time , now , to learn all about , and trouble shoot , nodejs and npm

If it installs ok out of the box , I'll use it .

I'll try [Brackets] next .

If that doesn't work out , I'll just use an FTP to keep my changes up-to-date .

btw: Lots of people don't want to stay connected to the internet more than is necessary .

Personally , I like to get online , do my stuff , then Disconnect .

Thanks..vm

ivan.popelyshev · January 13, 2016

Dont start it in powershell. Open your folder in explorer, "file"->"open command line here" , then type "node -v" , and it will show the version. If you dont know how to work with windows command line, you wont succeed with other web-servers too. Excuse me, but that stuff is one of basic things you have to know as a coder.

Image from origin 'file://' has been blocked from loading

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Installation Steps

Test it!

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members