Sets the horizontal and vertical alignment of the image. By default, the image is center aligned.

The valid values for horizontalAlignment are Image.AlignLeft, Image.AlignRight and Image.AlignHCenter. The valid values for verticalAlignment are Image.AlignTop, Image.AlignBottom and Image.AlignVCenter.

Set this property to define what happens when the source image has a different size than the item.

• Image.Stretch - the image is scaled to fit
• Image.PreserveAspectFit - the image is scaled uniformly to fit without cropping
• Image.PreserveAspectCrop - the image is scaled uniformly to fill, cropping if necessary
• Image.Tile - the image is duplicated horizontally and vertically
• Image.TileVertically - the image is stretched horizontally and tiled vertically
• Image.TileHorizontally - the image is stretched vertically and tiled horizontally
• Image.Pad - the image is not transformed

Image {
    width: 130; height: 100
    source: "qrc:/qtlogo.png"
}

Image {
    width: 130; height: 100
    fillMode: Image.PreserveAspectFit
    source: "qrc:/qtlogo.png"
}

Image {
    width: 130; height: 100
    fillMode: Image.PreserveAspectCrop
    source: "qrc:/qtlogo.png"
    clip: true
}

Image {
    width: 120; height: 120
    fillMode: Image.Tile
    horizontalAlignment: Image.AlignLeft
    verticalAlignment: Image.AlignTop
    source: "qrc:/qtlogo.png"
}

Image {
    width: 120; height: 120
    fillMode: Image.TileVertically
    verticalAlignment: Image.AlignTop
    source: "qrc:/qtlogo.png"
}

Image {
    width: 120; height: 120
    fillMode: Image.TileHorizontally
    verticalAlignment: Image.AlignLeft
    source: "qrc:/qtlogo.png"
}

Note that clip is false by default which means that the item might paint outside its bounding rectangle even if the fillMode is set to PreserveAspectCrop.

Set ImageFiles.MCU.resourceOptimizeForScale on images that are scaled to enable build-time optimizations for the resource.

This property holds the rotation of the item in degrees clockwise around its transformOrigin.

The default value is 0 degrees (that is, no rotation).

Rectangle {
    color: "blue"
    width: 100; height: 100
    Image {
        source: "red.png"
        x: 25; y: 25; width: 50; height: 50
        rotation: 30
    }
}

This property was introduced in Qt Quick Ultralite 1.3.

See also Transform and Rotation.

This property holds the scale factor for this item.

A scale of less than 1.0 renders the item smaller, whereas a scale greater than 1.0 renders the item larger. A negative scale causes the item to be mirrored when rendered.

The default value is 1.0.

Scaling is applied from the transformOrigin.

import QtQuick 2.15

Rectangle {
    color: "blue"
    width: 100; height: 100

    Rectangle {
        color: "green"
        width: 25; height: 25
    }

    Image {
        source: "red.png"
        x: 25; y: 25; width: 50; height: 50
        scale: 1.4
        transformOrigin: Item.TopLeft
    }
}

This property was introduced in Qt Quick Ultralite 1.3.

See also Transform and Scale.

As the url QML basic type is not supported, there exists an another basic type called image which is the type of the Image object's source property.

Image accepts an absolute resource URI, for example "qrc:/images/map.png". The resource must have been compiled with qulrcc tool to be available.

If a string that is not known at compile-time will be set as a source Qt Quick Ultralite will perform run-time lookup to find the resource handle for the given string.

For example the following code results in runtime lookup:

Image {
    source: "qrc:/" + "foo.png"
}

A failed lookup resets the source property to an empty state in which nothing is rendered.

See also Managing Resources and Dealing with image resources.

This property holds the list of transformations to apply.

For more information see Transform.

This property holds the origin point around which scale and rotation transform.

Nine transform origins are available, as shown in the image below. The default transform origin is Item.Center.

This example rotates an image around its bottom-right corner.

Image {
    source: "myimage.png"
    transformOrigin: Item.BottomRight
    rotation: 45
}

To set an arbitrary transform origin point use the Scale or Rotation transform types with transform.

This property was introduced in Qt Quick Ultralite 1.3.