QML Image Element

Specifies that images on the local file system should be loaded asynchronously in a separate thread. The default value is false, causing the user interface thread to block while the image is loaded. Setting asynchronous to true is useful where maintaining a responsive user interface is more desirable than having images immediately visible.

默认值为假，此时用户接口线程会阻塞知道将图片加载完。如果asynchronous为真则会在另外一个线程中加载图片，不会阻塞用户接口线程。

Note that this property is only valid for images read from the local filesystem. Images loaded via a network resource (e.g. HTTP) are always loaded asynchonously.

注意这个属性只对读取本地的图片有效，网络资源图片则总是在另外一个线程中加载。

Set this property to define what happens when the image set for the item is smaller than the size of the item.

fillMode属性用来定义当图片大小设置小于item大小时的填充方式。

• Image.Stretch - the image is scaled to fit
• 此时图片会被拉伸到item的大小。Image.Stretch是fillMode的默认填充方式。
  
• 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 {
      130; height: 100
     fillMode: Image.PreserveAspectFit
     smooth: true
     source: "qtlogo.png"
 }

 Image {
      120; height: 120
     fillMode: Image.Tile
     source: "qtlogo.png"
 }

 Image {
      120; height: 120
     fillMode: Image.TileHorizontally
     smooth: true
     source: "qtlogo.png"
 }

See also Image example.

These properties hold the size of the image that is actually painted. In most cases it is the same as width and height, but when using a fillMode PreserveAspectFit or fillMode PreserveAspectCrop paintedWidth or paintedHeight can be smaller or larger than width and height of the Image element.

This property holds the progress of image loading, from 0.0 (nothing loaded) to 1.0 (finished).

progress属性表明图片加载进度，0.0表示没有加载，1.0表示加载完成。

See also status.

Set this property if you want the image to be smoothly filtered when scaled or transformed. Smooth filtering gives better visual quality, but is slower. If the image is displayed at its natural size, this property has no visual or performance effect.

如果设置smooth属性为真则当图片缩放或是向量变换会给予图片比较好的显示效果，但这将导致速度变慢。如果图片显示是其固有大小则没有影响。

Note: Generally scaling artifacts are only visible if the image is stationary on the screen. A common pattern when animating an image is to disable smooth filtering at the beginning of the animation and reenable it at the conclusion.

Image can handle any image format supported by Qt, loaded from any URL scheme supported by Qt.

The URL may be absolute, or relative to the URL of the component.

See also QDeclarativeImageProvider.

If the source is a non-scalable image (eg. JPEG), the loaded image will be no greater than this property specifies. For some formats (currently only JPEG), the whole image will never actually be loaded into memory.

对于不可缩放的图片（例如JPEG）,加载的图片将不会比这个属性大。实际上对于JPEG图片来说，整个图片并没有真正全部加载到内存中。

Note: Changing this property dynamically causes the image source to be reloaded, potentially even from the network, if it is not in the disk cache.

注意这个属性不能动态改变，否则图片奖重新加载，如果这个图片来自网络则重新下载。

This property holds the status of image loading. It can be one of:

status属性表明图片加载的状态。可取如下值：

• Image.Null - no image has been set
• Image.Null 表明没有设置图片
  
• Image.Ready - the image has been loaded
• Image.Ready 表明图片已经加载完毕
  
• Image.Loading - the image is currently being loaded
• Image.Loading 表明图片正在加载
  
• Image.Error - an error occurred while loading the image
• Image.Error 表明加载图片时出错
  

Use this status to provide an update or respond to the status change in some way. For example, you could:

我们可以使用status来做一些针对图片加载完毕后的一些处理。如下例所示：

• Trigger a state change:

   State { name: 'loaded'; when: image.status == Image.Ready }

• Implement an onStatusChanged signal handler:
  [javascript] view plaincopy

   

  1. Image {  
  2.     id: image  
  3.     onStatusChanged: if (image.status == Image.Ready) console.log('Loaded')  
  4. }  
  [javascript]view plaincopy

   

  1. <span style="font-size:18px;"> Image {  
  2.      id: image  
  3.      onStatusChanged: if (image.status == Image.Ready) console.log('Loaded')  
  4.  }  
  5. </span>  

• Bind to the status value:

   Text { text: image.status == Image.Ready ? 'Loaded' : 'Not loaded' }