Local images not loading in Babylon GUI (GUI Editor and code)

Questions
1

Hi!

I’m having trouble loading local images in Babylon GUI when using a Babylon.js Editor project with Vite.

I’ve tried both approaches:

  • Adding an image through the Babylon.js Editor GUI Editor.

  • Creating a BABYLON.GUI.Image directly from code.

For example:

const image = new BABYLON.GUI.Image(
    "myImage",
    "assets/2d/android.png"
);

advancedTexture.addControl(image);

The image does not appear. I also tried different relative paths and checked that the image file exists in the project.

Interestingly, I can see that the image is being requested/loaded in some cases, but it still doesn’t render correctly. At one point I only got a blue rectangle instead of the image.

I’m using a Babylon.js Editor project with Vite and Babylon.js 9.12.1.

My project structure is roughly:

public/
├── assets/
│   └── 2d/
│       └── android.png
└── scene/
    └── example.babylon

I have also tried using paths such as:

"assets/2d/android.png"
"./assets/2d/android.png"
"/assets/2d/android.png"

but I haven’t been able to get the local image to display correctly.

Is there a specific way that local GUI images should be referenced when using Babylon.js Editor + Vite?

Could this be related to Vite’s base: './' configuration or to how the Babylon Editor handles asset paths?

Thanks!

2

cc @julien-moreau, in case there’s some specific interactions between the editor and the GUI.

You don’t have a 404 in the console log?

3

I was able to solve this!

I realized that the asset path used by the Editor is different from the path used in the Vite build. With the following code:

const logo = texture.getControlByName("logo") as Image;

if (logo) {
    logo.source = "/scene/assets/amiga.jpg";
    logo.isPointerBlocker = false;
}

the image works perfectly when running with npm run dev.

In the Editor, I currently use a placeholder image by default.

Is there a way to set the same image in the Editor as well, so I can see the actual image while working in the GUI Editor?

4

Hey @Maxi !
You spotted a bug, the path should always be the one you have put first assets/2d/android.png. That means I have problem when running npm run dev where the rootUrl for assets is not properly set. I have created the issue here Images paths used in Babylon.js GUI files are not same between inline play and production · Issue #949 · BabylonJS/Editor · GitHub and it’ll be fixed in next release. I plan to release this week.

5

Thanks a lot for looking into this and for creating the issue! I really appreciate it.

One quick question: when the new release is available, will the Babylon.js Editor update automatically, or will I need to download/install the new version manually?

Thanks again!

6

It’s normal!
Nothing special, you’ll just need to launch the editor and a notification on your computer will saying you have to restart it to apply the update :slight_smile:
I’ll let you know once I deployed it