Load an image for WebGL texture but failed because of CORS

Question

I'm reading a tutorial on WebGL (link). In this tutorial, we load a texture locally. However, because of cross-origin issue for WebGL texture, we must add img.crossOrigin="anonymous".

Unfortunatly for me, it invokes onerror event.

Here's the code:

const image = new Image();
image.onload = () => {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
    gl.generateMipmap(gl.TEXTURE_2D);
    console.log("Texture loaded.");
};
image.onerror = () => {
    console.log("Texture error!");
}
image.crossOrigin = "anonymous";
image.src = url;

What did I missed?

score 2 · Accepted Answer · answered Oct 20 '19 at 13:52

2

To load images locally you need to run a server and NOT set image.crossOrigin

I recommend you start with this one or one of the many here

answered Oct 20 '19 at 13:52

gman

100,619
31
269
393

Thanks! I understand I have to run a server locally, not just open the HTML document. As I develop with Visual Studio Code, I use Live Server extension. – Spiralwise Oct 20 '19 at 14:18
So it's working for you now and you can load your texture? – gman Oct 20 '19 at 14:21
Yes, it works! I can see my texture on my model now! – Spiralwise Oct 20 '19 at 14:52

Load an image for WebGL texture but failed because of CORS

1 Answers1