Is there a way to add an image to my UI from the editor (and not via UIElements.Image)

I'm using Unity 2021.2.

I know that there's an Image property in the Background section, but that's not quite an image right? It's still a background, meaning that if we set the size of the VisualElement to 100%, and height to auto, it will make the image disappear, as the element is actually empty from a content point of view.

So let's say I want to add a simple logo in my menu, do I need to create it via code?

---

For now I ended up using a css trick with a padding-top set to a percentage and changing the size of the background to fit inside its container.

 

This won't work for you?
https://docs.unity3d.com/ScriptReference/UIElements.Image.html

[edit] Just to clarify, you can still use it in the UXML even if it is not shown in the UI Builder's available controls. Just insert it where it needs to be in the UXML and Builder will update with it. Although I see there are no properties exposed so you would have to set the actual texture or sprite via C#.

 

I was kind of hoping that I was missing something. Images are a common element in UIs, so having to manually update the UXML, and then again having to set the image via a script sounded like a very weird limitation to me :'(

Thanks for your answer.

 

Well, you're using an alpha software with a preview package. Nothing is done in these yet. They will add the Image component to the UI Builder at some point, I'm pretty sure.

 

Somewhat old post but there is still no image in the "Libary" menu of the UI Builder. Actually you just have to add one, then you can copy&paste it. But the Inspector doesn't show the fields for the image, so you have to access it from code. Plus point of images: you can add sprites. Pretty useful when making an inventory item editor window.

 

There must be a way to add it to the Library. I can't believe it's not there yet.

 

There is a really easy way to add it. Itr will then show up in the library under the project tab.

Code (CSharp):

1.  
2. using UnityEngine.UIElements;
3.  
4. public class MyImage : Image
5. {
6.     public new class UxmlFactory : UxmlFactory<MyImage, Image.UxmlTraits>{}
7.  
8.     public MyImage()
9.     {
10.        
11.     }
12. }
13.  

 

Thank you! So strange they didn't add Image Element to the UI Builder Library.

 

Is this available now?

 

Do you know how to add a "binding path" from a sprite variable and change the image accordingly?