Background showing up as black and red checkerboard

Hi I followed this tutorial, Playground to Production - Fruit Fallin' | Babylon.js Documentation
and when I go to put in my ts code for the background which I am using my own Image for, I get a black and red checkerboard and it is referenced correctly. This is the snippet of code that I am using:

    var dome = new BABYLON.PhotoDome(
        "testdome","Founders.jpg", 
        {
            resolution: 32,
            size: 1000
        },
        scene
    );
    dome.imageMode = BABYLON.PhotoDome.MODE_SIDEBYSIDE;

It means your texture was not loaded or not found on your server.

Would you know how to fix that? I just have a jpg image.

First thing is to check errors in your console.

I just checked and this is the error present

Failed to load resource: the server responded with a status of 404 (Not Found).

I am not sure as the image is present but It cannot seem to load it

Most probably there is some error in image address in your code; maybe you need to add something like ./ or other depending on your setup, so your relative addresses would work.

I am a bit unsure. So I did that and it autocompletes but I still get the same error. Do I need to reference the picture somewhere else as well?

1 Like

The wrong URL is shown at the console. Try to find why it is wrong.