ImageView

The ImageView element extending the View interface is designed to display images.

To create an ImageView function is used:

func NewImageView(session Session, params Params) ImageView

The displayed image is specified by the string property "src" (Source constant).As a value, this property is assigned either the name of the image in the "images" folder of the resources, or the url of the image, or inline-image.

An inline-image is the content of an image file encoded in base64 format.To get an inline-image from the application resources, use the function

func InlineImageFromResource(filename string) (string, bool)

Inline-images must be used in WebAssembly applicationsif you want to host images in resources rather than on an external server.Inline-images can cause app freezes in Safari and should be avoided.Example

if runtime.GOOS == "js" {
	if image, ok := rui.InlineImageFromResource("image.png"); ok {
		view.Set(rui.Source, image)
	}
} else {
	view.Set(rui.Source, "image.png")
}

ImageView allows you to display different images depending on screen density(See section "Images for screens with different pixel densities").In this regard, the ImageView interface has two additional methods that allow you to find out which image is displayed:

CurrentSource() string
NaturalSize() (float64, float64)

CurrentSource returns the url of the rendered image. Until the image is loaded, this method returns an empty string.

NaturalSize() returns the original width and height of the rendered image, in screen pixels.Those if the original image is 100x200 and the screen density is 2, then the NaturalSize method will return (50, 100).Until the image is loaded, this method returns the value (0, 0).

Two events are used to track the loading of an image:

"loaded-event" (LoadedEvent constant). This event fires right after the image is loaded.
"error-event" (ErrorEvent constant). This event occurs when an error occurs while loading an image.

The main listener for these events has the following format:

func(ImageView)

The "alt-text" property (AltText constant) of the string type allows you to set a description of the image.This text is displayed if the browser was unable to load the image.Also, this text is used in the sound system for the blind.

The "fit" property (Fit constant) of type int defines the image scaling parameters.Valid values:

Value	Constant	Name	Resizing
0	NoneFit	"none"	The image is not resized
1	ContainFit	"contain"	The image is scaled to maintain its aspect ratio while fitting within the element’s content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" if its aspect ratio does not match the aspect ratio of the box
2	CoverFit	"cover"	The image is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit
3	FillFit	"fill"	The image to fill the element’s content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit
4	ScaleDownFit	"scale-down"	The image is sized as if NoneFit or ContainFit were specified, whichever would result in a smaller concrete object size

The "image-vertical-align" int property (ImageVerticalAlign constant) sets the vertical alignment of the imagerelative to the bounds of the ImageView. Valid values:

Value	Constant	Name	Alignment
0	TopAlign	"top"	Top alignment
1	BottomAlign	"bottom"	Bottom alignment
2	CenterAlign	"center"	Center alignment

The "image-horizontal-align" int property (ImageHorizontalAlign constant) sets the horizontal alignment of the imagerelative to the bounds of the ImageView. Valid values:

Value	Constant	Name	Alignment
0	LeftAlign	"left"	Left alignment
1	RightAlign	"right"	Right alignment
2	CenterAlign	"center"	Center alignment

The following functions can be used to retrieve ImageView property values:

func GetImageViewSource(view View, subviewID ...string) string
func GetImageViewAltText(view View, subviewID ...string) string
func GetImageViewFit(view View, subviewID ...string) int
func GetImageViewVerticalAlign(view View, subviewID ...string) int
func GetImageViewHorizontalAlign(view View, subviewID ...string) int