【qml】Image 显示网络图片

一、说明

Image类型可以用来显示一个图像。
使用source属性将图像的源指定为一个URL。可以用Qt支持的任何标准图像格式提供图像，包括位图格式(如PNG和JPEG)和矢量图形格式(如SVG)。如果你需要显示动画图像，使用AnimatedSprite或AnimatedImage。
如果没有指定宽度和高度属性，图像将自动使用已加载图像的大小。默认情况下，指定项目的宽度和高度将使图像缩放到该大小。这种行为可以通过set来改变

案例

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Item {
    width: 640
    height: 480
    visible: true
    anchors.fill: parent

    BusyIndicator{
        id : busy;
        running: true;
        anchors.centerIn: parent;
        z : 2;
    }
    Text {
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z:3;
    }

    Image {
        id: imageViewer;
        asynchronous: true;
        cache: false;
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit;
        onStatusChanged: {
            if(imageViewer.status ===Image.Loading){
                busy.running = true;
                stateLabel.visible = false;
            }
            else if(imageViewer.status ===Image.Ready){
                busy.running = false;
            }
            else if(imageViewer.status === Image.Error){
                busy.running = false;
                stateLabel.visible = true;
                stateLabel.text = "Error"
            }
        }
    }
    property var urls: [
        "https://goss3.cfp.cn/creative/vcg/veer/800/new/VCG41N487648969.jpg",
        "https://goss4.cfp.cn/creative/vcg/800/new/VCG41N888067282.jpg",
        "http://pics0.baidu.com/feed/a686c9177f3e6709665d2ed0c933213bf9dc55bf.jpeg?token=c923a2fa85ba4a5283ebede1db712492"
    ]
    Component.onCompleted: {
        timer.start();
    }

    Timer{
        id: timer
        interval: 3000;
        repeat: true
        triggeredOnStart: true;
        property int idx: 0
        onTriggered: {
            console.log(idx%3)
            imageViewer.source = urls[idx%3];
            idx++;
        }
    }
}

qml 有一些控件控件默认支持network，比如网络图片，视频，音频，甚至是qml文件，有些功能还是很方便的，如果出现tsl问题，请拷贝openssl的dll文件到运行目录。