can't load texture with Babylon.js on Chrome

Question

When I try to add an image to a 3d sphere using Babylon.js, I get the error Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.

This is how I've written my code. I've followed the tutorial here and everything has worked prefectly until I try to change the textures.

//Creation of spheres
var sphere1 = BABYLON.Mesh.CreateSphere("Sphere1", 10.0, 6.0, scene);
var sphere2 = BABYLON.Mesh.CreateSphere("Sphere2", 2.0, 7.0, scene);
var sphere3 = BABYLON.Mesh.CreateSphere("Sphere3", 10.0, 8.0, scene);

//Positioning the meshes
sphere1.position.x = 10;
sphere3.position.x = -10;

//Textures
var sphere1texture = new BABYLON.StandardMaterial("sphere1texture", scene);
var sphere2texture = new BABYLON.StandardMaterial("sphere2texture", scene);
var sphere3texture = new BABYLON.StandardMaterial("sphere3texture", scene);
sphere1texture.alpha = 0.75
sphere2texture.diffuseTexture = new BABYLON.Texture("./texture1.jpg", scene); 

sphere2 (the one I tried to load the image to) doesn't show up in the program, but everything else works fine.

Also, I tried downloading the source code for the lesson and the same thing happened, so I'm guessing its something to do with my browser (Google Chrome).

Answer 1

You have to use your files on a webserver and not locally to ensure there is no security issues

Answer 2

You can load assets only if your app runned on the local or global server. If not, http request cant be completed.