The Idea of this small project was to make a small project to learn more about how to use Images in Qt & QML

import QtQuick.Layouts

ApplicationWindow{
    id: appWindow         
    
    visible: true
    ....
    Image {
            id: mainImage

                // the image with and hight change with the Canves size
            width: mainWindow.width - 200 
            height: mainWindow.height - 200           

            source: "qrc:/rec/img/profile.png"
            anchors.centerIn: parent
            fillMode: Image.PreserveAspectFit
            mirror: true  // Boolean to flip image
            horizontalAlignment: Image.AlignHCenter
            verticalAlignment: Image.AlignVCenter
            autoTransform: true
            asynchronous: true
            onStatusChanged: console.log("status: " + mainImage.status)           
 
        }
}


we can also control the image size and crop with this code 


Image {
            .... 
            sourceSize.width: 600
            sourceSize.height: 600            
            sourceClipRect: Qt.rect(0,0,300,200) 
        }


and last and not lees for the top left info bar I'm using small Rectangle Components with a Text Components update in real time


Rectangle {
    width: imgInfo.width + 20
    height: imgInfo.height
    color: "#3873a7"
    anchors.top: parent.top
    anchors.left: parent.left

    Text {
        id: imgInfo
        text: "width: " + mainImage.width + " x height: " + mainImage.height
        font.family: "Pulpo"
        font.pointSize: 10
        font.bold: true
        color: "#d4d5d5"
        anchors.centerIn: parent
    }
}

you can find more info about Qml Image Component Here : Image QML Type | Qt Quick 6.3.2