Very newb question: how do I load an image file?

[VirtualVirgin]

I created a new image UI component and then put this in the onInit:

This complies ok but the image does not appear in the UI; I get "Missing" in a grey box.

The file in question is placed in the "Images" folder in the project folder of this project.
The Docs say this is the default folder?

What would I need to do to get the image to appear?

[dannytaurus]

@VirtualVirgin I think you need to load the image(s) into the pool first.

https://docs.hise.dev/scripting/scripting-api/engine/index.html#loadimageintopool

Engine.loadImageIntoPool( String id)

[DW]

I think you need to use a panel, something like this.

// loads the image from the project's Image folder
Panel.loadImage("{PROJECT_FOLDER}sunset.png", "sunset");

Panel.setPaintRoutine(function(g)
{   
   g.fillAll(Colours.white);
   g.drawImage("sunset", [0, 0, 200, 200], 0, 0);
   g.drawImage("sunset", [200, 0, 300, 200], 0, 0);
});

https://docs.hise.dev/scripting/scripting-in-hise/scriptpanel.html

[d.healey]

@DW He's using an image control so a panel isn't necessary

[DW]

@d-healey thank you for clarifying!

[orange]

@VirtualVirgin Copy the image file to the project's Images folder. After that, you can change all of the properties with setPropertiesFromJSON easily. I also added Width and Height for example.

const var VVLogo = Content.getComponent("VVLogo");

Content.setPropertiesFromJSON("VVLogo", {    
    "width": 150,
    "height": 150,
    "fileName": "{PROJECT_FOLDER}VV_logo.jpg"
  });

[VirtualVirgin]

@orange said in Very newb question: how do I load an image file?:

@VirtualVirgin Copy the image file to the project's Images folder. After that, you can change all of the properties with setPropertiesFromJSON easily. I also added Width and Height for example.

const var VVLogo = Content.getComponent("VVLogo");

Content.setPropertiesFromJSON("VVLogo", {    
    "width": 150,
    "height": 150,
    "fileName": "{PROJECT_FOLDER}VV_logo.jpg"
  });

Thank you :)
Yes, this solved it!