In this video, we’re going to continue covering the UI Design view and look at the Image object. The image object can be found in the Ui section of the Control Library.
Adding the image object to the workspace, it will first appear with a generic place-holder image. In the properties window, the image object has the usual naming and workspace location. The object can also be interacted with directly in the workspace to move or resize. Once you have an image ready to load, press this “Browse” button at the bottom of the general properties. This will open a pop-up to point to the location of the image file you want to load. Popular image types like PNG, JPEG, or SVG are supported. Once you’ve located the image, click “Open” and you will be asked whether to resize the object to the image’s size, or to resize the imported image to the object dimensions we’ve set. Let’s resize the image to the object, then click “Open”, and the logo image is now on our control panel. Also in the properties window, there are border settings. Border width can be changed by using this slider or typing in the value directly. Border color and transparency can be set underneath the width. And finally, the border can be disabled completely by unchecking the “Enable Border” button.