Image

property Int imageWidthread only

property Int imageHeightread only

The size of the source image.

property Float width

property Float height

The width and height of the Image. If not set, these default to the width and height of the source image file.

property Image.FillMode fillMode: .Stretch

When the size of the Image item is different from the size of the image, the fillMode controls how the image fills the space available to it.

Image.FillMode.Stretch

The image will be stretched to fit the exact width and height of the item, even if this distorts the image.

Image.FillMode.Fit

Scales the image by its aspect ratio to fit the item. This may add padding around the image, but will not crop it.

Image.FillMode.Cover

Scales the image by its aspect ratio to completely fill the item. This might result in some of the image being cropped out.

Image.FillMode.Tile

The image is tiled across the horizontal and vertical axis.

property Image.Status statusread only

The status of the image.

Image.Status.Idle

No source url has been specified.

Image.Status.Loading

The element is loading the image.

Image.Status.Ready

The element has successfully loaded the image.

Image.Status.Failed

The element has failed to load the image.

property Float downloadProgressread only

The download progress of the image, from 0.0 to 1.0. For non-network images this will always be 1.0.

property Url source

This property should be set to the path of the source image, or to a HTTP or HTTPS URL.

Image {
    source: "images/ZingLabs.png"
}
Image {
    source: "http://www.zingstudio.io/demos/random.jpg"
}

function crossfade(Url target)

Cross fades from the current image, to the target image. If there is no current image, this is essentially a fade in, and if target is an empty url, a fade out.

optional Int duration = 250

The duration of the cross fade.

optional Int delay = 0

A delay, in milliseconds, before the fade begins. As network images can take some time to load, the cross fade begins after either the delay or the image loads, whichever is later.

The following example fades between random networked images.

event updated()

This event fires when an image changes. This can be if the source has changed or if Zing app with a native backend that can change the files.