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.

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.

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.

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.

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`),
		)
	}
}