qml Image显示网络图片

原创于 2021-09-15 10:28:31 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#qml显示网络图片

qml 专栏收录该内容

38 篇文章

订阅专栏

本文探讨了Qt中显示本地图片的传统方式与QML Image组件的创新之处，后者能直接展示网络图片，提升用户体验。通过实例展示了如何在点击事件中动态改变Image的网络图片源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Qt显示图片时必须是本地的或者qrc资源文件里的图片，而qml的Image确可以显示网络的图片，这是一个大的优势，不用下载图片到本地。下面请看源码示例：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("qml显示网络图片")

    Image {
        id: imageHeader
        sourceSize.width: 300
        sourceSize.height: 300
        anchors.centerIn: parent
        source: "qrc:/image/lasa.jpg"
    }

    Rectangle {
        id: buttonRect
        width: 100;
        height: 50
        color: "red"
        anchors.top: parent.top
        anchors.left: parent.left

        MouseArea {
            anchors.fill: parent
            onClicked: {
                //网络图片路径
                imageHeader.source = "http://www.gov.cn/xhtml/2016gov/images/guoqing/bigmap.jpg"
            }
        }
    }
}

运行结果点击红色按钮修改url：