Image QML Type

Displays an image. More...

Import Statement: import QtQuick .
Since: Qt Quick Ultralite 1.0


Inherited By:



Detailed Description

The Image type displays an image.

The source of the image is specified as a resource URI using the source property. Images resources are made available through the qulrcc resource compiler. By default, images are decompressed before being embedded into the binary and thus any of the standard image formats supported by Qt, including bitmap formats such as PNG and JPEG, and vector graphics formats such as SVG are supported. The following table lists all the supported formats:

BMPWindows Bitmap
DDSDirect Draw Surface
GIFGraphic Interchange Format (optional)
ICNSApple Icon Image
JP2Joint Photographic Experts Group 2000
JPGJoint Photographic Experts Group
JPEGJoint Photographic Experts Group
MNGMultiple-image Network Graphics
PNGPortable Network Graphics
PBMPortable Bitmap
PGMPortable Graymap
PPMPortable Pixmap
SVGScalable Vector Graphicsd
TGATruevision Graphics Adapter
TIFFTagged Image File Format
WBMPWireless Bitmap
XBMX11 Bitmap
XPMX11 Pixmap

Note: Animated images are not supported.

If the width and height properties are not specified, the Image automatically uses the size of the loaded image. By default, specifying the width and height of the item causes the image to be scaled to that size. This behavior can be changed by setting the fillMode property, allowing the image to be stretched and tiled instead.

See also dealing with image resources.

Example Usage

The following example shows the simplest usage of the Image type.

import QtQuick 2.15

Image {
    source: "qrc:/pics/qtlogo.png"

See also BorderImage, ColorizedImage, qulrcc, QUL_COMPRESSION, QUL_COPY_TO_RAM, QUL_OPTIMIZE_FOR_SCALE, QUL_OPTIMIZE_FOR_ROTATION, Dealing with image resources, Image optimizations, Managing Resources and Assets, and Image Caching.

Property Documentation

horizontalAlignment : enumeration

verticalAlignment : enumeration

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.

fillMode : enumeration

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

Stretch (default)
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 QUL_OPTIMIZE_FOR_SCALE on images that are scaled to enable build-time optimizations for the resource.

source : image

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 to be available.

Note: Dynamic strings cannot be converted to images.

See also Managing Resources and Assets and Dealing with image resources.

transform : list<Transform>

This property holds the list of transformations to apply.

For more information see Transform.

Available under certain Qt licenses.
Find out more.