How do I use a local asset file?

I’m trying to use a local image to add as GUI with the following code:

  const image = new Image("myImage", "/assets/textures/myImage.png");
  image.width = "200px";
  image.height = "200px";

  image.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;
  image.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;

  const gui = AdvancedDynamicTexture.CreateFullscreenUI("myUI");
  gui.addControl(image);

The image doesnt seem to load, if I use a web url it does work.

I’m not sure how to reference a local asset from the script.

By the way I’m using the Babylon.js editor and editing my scripts in vs code.

Adding @julien-moreau and you probably can not cause there is no easy way on the web to access local files.

So basically is how I regular have my project structure setup. Assets are on the assets directory at the root of the project. The thing is that when building the project with webpack it doesn’t know where the assets directory is.

Yup it is sometimes all weird in webpack :slight_smile: The simplest would be to put it in a folder consider static and load from there or to setup file loaders correctly.

Hi @ckoryom !
Would be awesome to know how you have fixed. Using basic webserver provided in the templates of the editor I failed to reproduce :frowning:

@julien-moreau I wasn’t able to find a solution. Referencing assets from the actual code doesn’t workm I tried also using “FS” to load the local files but the webserver fails to build since it doesn’t know what fs (interesting because its a default JS library) My guess is that I would have to add the assets manually on the dist folder to see of they can be referenced from there.