Note: This is a pre-release of BagaWork. Many things will likely change before the first stable release.

Image

On this page you find the documentation for the GUI Component Image.

Introduction

The Image component is a view that shows an image to the user.

Example

Example showing what the Image component looks like when shown on the screen.

url() - Specifying the image

Use the configuration method url() to tell the Image component which image it should show. Pass it the URL to the image as a string.

Example

Example showing what the Image component looks like when shown on the screen.

Open in Online Editor
class StartPage extends Page{
	createGui(){
		return Image
			.backgroundColor(`red`)
			.url(`https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/800px-SNice.svg.png`)
	}
}

The image will always be drawn at the center of the Image component. Try resizing the app screen in the example above, and notice that the image always stays in the center.

Resizing the image

The Image will occupy the space given to it by the layout it's in (or the entire screen if the Image is the root component). If the layout hasn't given it a specific size (for example when using the Image component as a child in a Rows or Columns layout without calling size()), it will have the same size as the image itself.

Example
Open in Online Editor
class StartPage extends Page{
	createGui(){
		return Rows.children(
			Space,
			Image
				.backgroundColor(`red`)
				.url(`https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/800px-SNice.svg.png`),
			Space,
		)
	}
}

If you want to give the image a specific size, put it in a Box component.

Example
Open in Online Editor
class StartPage extends Page{
	createGui(){
		return Box.backgroundColor(`lime`).width(20).height(20).child(
			Image
				.backgroundColor(`red`)
				.url(`https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/800px-SNice.svg.png`),
		)
	}
}