qml image - KerwinKoo/KerwinKoo.github.io GitHub Wiki
Image 可以显示一个图片，只要是 Qt 支持的，比如 JPG 、 PNG 、 BMP 、 GIF 、 SVG 等都可以显示。它只能显示静态图片，对于 GIF 等格式，只会把第一帧显示出来。如果你要显示动画，可以使用 AnimateSprite 或者 AnimateImage 。
Image 的 width 和 height 属性用来设定图元的大小，如果你没有设置它们，那么 Image 会使用图片本身的尺寸。如果你设置了 width 和 height ，那么图片就可能会拉伸来适应这个尺寸。
此时 fillMode 属性可以设置图片的填充模式，它支持 Image.Stretch（拉伸） 、 Image.PreserveAspectFit（等比缩放） 、 Image.PreserveAspectCrop（等比缩放，最大化填充 Image ，必要时裁剪图片） 、 Image.Tile（在水平和垂直两个方向平铺，就像贴瓷砖那样） 、 Image.TileVertically（垂直平铺） 、 Image.TileHorizontally（水平平铺） 、 Image.Pad（保持图片原样不作变换） 等模式。
Image 默认会阻塞式的加载图片，如果要显示的图片很小，没什么问题，如果分辨率很高，麻烦就来了。此时你可以设置 asynchronous 属性为 true 来开启异步加载模式，这种模式下 Image 使用一个线程来加载图片，而你可以在界面上显示一个等待图标之类的小玩意儿来告诉用户它需要等会儿。然后当 status（枚举值） 的值为 Image.Ready 时再隐藏加载等候界面。
比较强悍的是，Image 支持从网络加载图片。它的 source 属性类型是 url ，可以接受 Qt 支持的任意一种网络协议，比如 http 、 ftp 等。而当 Image 识别到你提供的 source 是网络资源时，会自动启用异步加载模式。此时呢，Image 的 progress（取值范围 0.0 至 1.0 ），status（枚举值）都会适时更新，你可以根据它们判断何时结束你的加载等候提示界面。
import QtQuick 2.0
Image {
source: "images/yourimage.png"
}
**网络图片调用显示：**
import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
width: 480;
height: 320;
color: "#121212"; //基色为黑色，在没有加载完图片之前显示基色
BusyIndicator { //定义busy指示器
id: busy;
running: true; //默认是开启
anchors.centerIn: parent;
z: 2; //优先级为2 越大越靠前
}
Label {
id: stateLabel;
visible: false;
anchors.centerIn: parent;
z: 3; //优先级为3 （本标签优先显示）
}
Image {
id: imageViewer;
asynchronous: true;//异步加载。不过对于网络资源 Image 默认异步加载，这个属性不起作用，只有你想异步加载本地资源时才需要设置它。
cache: false; //本地不缓存图片
anchors.fill: parent;
fillMode: Image.PreserveAspectFit;//缩放形式（等比缩放）
onStatusChanged: {//信号处理（当状态改变时）Image 的 status 属性变化时会发射 statusChanged() 信号
if (imageViewer.status === Image.Loading) {
busy.running = true;
stateLabel.visible = false;
}
else if(imageViewer.status === Image.Ready){//图片加载成功后，关闭busy指示器
busy.running = false;
}
else if(imageViewer.status === Image.Error){//图片加载失败时，关闭busy指示器，显示错误指示标签
busy.running = false;
stateLabel.visible = true;
stateLabel.text = "ERROR";
}
}
}
Component.onCompleted: {//组件完工时开始调用网络图片
imageViewer.source = "http://image.cuncunle.com/Images/EditorImages/2013/01/01/19/20130001194920468.JPG";
}
}