Qt QML跨文件设置别名后图标无法显示问题求助

开发设置页面时创建了可复用QML组件，在Settings.qml中使用该组件时，文本、颜色均可正常渲染，但图标始终无法加载显示。

开发环境 #

• Ubuntu
• Qt Creator 9.0.2
• Qt 6.2.4

Component.qml #

import QtQuick 2.15
import QtQuick.Layouts 1.15

Item {

    property alias option_width: menu_option_btn.width
    property alias btnText: btn_text.text
    property alias btnIcon: btn_icon.source
    property alias btnColor: bg_option.color
    property alias btnIconWidth: btn_icon.sourceSize.width
    property alias btnIconHeight: btn_icon.sourceSize.height

    id: menu_option_btn
    height: 50
    width: 300

    Rectangle {
        id: bg_option
        color: "#433f3f"
        anchors.fill: parent
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent

        RowLayout {
            id: btn_layout
            anchors.fill: parent

            Rectangle {
                id: image_holder
                width: 50
                height: 200
                color: "#0000ffff"
                Layout.maximumWidth: 50
                Layout.minimumWidth: 50
                Layout.fillHeight: true

                Image {
                    id: btn_icon
                    anchors.fill: parent
                    sourceSize.height: 52
                    sourceSize.width: 52
                    anchors.leftMargin: 2
                    anchors.bottomMargin: 5
                    anchors.topMargin: 5
                    fillMode: Image.PreserveAspectFit
                    visible: true
                }
            }

            Text {
                id: btn_text
                color: "#ffffff"
                text: qsTr("Text")
                font.pixelSize: 16
                Layout.leftMargin: 5
                Layout.fillWidth: true
            }
        }
    }

}

Settings.qml #

import "../../widgets"
import QtQuick 2.15
import QtQuick.Layouts 6.0
import QtQuick.Controls 2.15

Item{
    id: settings_app
    width: 1024 ;height: 540

    /*
    Image {
        id: settings_bg
        anchors.fill: parent
        source: "../../wallpapers/sunset flowers.png"
        fillMode: Image.PreserveAspectCrop
    }

*/
    Component.onCompleted: {
        settingsApp.showName()
    }

    RowLayout {
        id: settings_layout
        anchors.fill: parent

        Rectangle {
            id: side_menu
            width: 200
            height: 200
            color: "#e82f2e2e"
            Layout.maximumWidth: 250
            Layout.minimumWidth: 250
            Layout.fillHeight: true

            ColumnLayout {
                id: side_menu_layout
                anchors.fill: parent
                spacing: 0

                ColumnLayout {
                    id: side_menu_layout_up
                    height: 100
                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                    spacing: 0

                    Layout.maximumHeight: 200
                    Layout.minimumHeight: 200
                    Layout.fillWidth: true

                    Image {
                        id: frame_bg
                        width: 150
                        height: 150
                        opacity: 1
                        source: "../../icons/DSC04191.JPG"
                        Layout.maximumHeight: 150
                        Layout.maximumWidth: 150
                        Layout.minimumHeight: 150
                        Layout.minimumWidth: 150
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                        sourceSize.height: 150
                        sourceSize.width: 150
                        fillMode: Image.PreserveAspectCrop
                    }

                    Text {
                        id: displayName
                        color: "#ffffff"
                        text: qsTr("Username")
                        font.pixelSize: 16
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                        Layout.fillWidth: true
                    }

                }

                ColumnLayout {
                    id: side_menu_down_layout
                    width: 100
                    height: 100
                    Layout.topMargin: 50
                    Layout.maximumWidth: 250
                    Layout.minimumWidth: 250
                    Layout.maximumHeight: 275
                    Layout.minimumHeight: 275
                    Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
                    Layout.fillHeight: true
                    Layout.fillWidth: true

                    MenuOption {
                        id: option_account
                        Layout.leftMargin: 10
                        Layout.fillWidth: true
                        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
                        btnText: "Account"
                        option_width: 250
                        btnColor: "#0000ffff"
                        btnIconHeight: 52
                        btnIconWidth: 52
                        btnIcon: "qrc:/Icons/icons/monitor.png"
                    }
                }
            }

        }
    }

    Connections{
        target: settingsApp

        function onChangeDisplayName(stringText){
            displayName.text = stringText
        }
    }

}

项目目录结构 #

.
├── apps
│   ├── Settings
│   │   └── Settings.qml
│   └── VStore
│       ├── AppView.qml
│       ├── StoreAccount.qml
│       ├── StoreSettings.qml
│       └── VStore.qml
├── icons
│   ├── account.png
│   ├── back-arrow-64.png
│   ├── battery-icon.png
│   ├── cart.png
│   ├── cart-solo.png
│   ├── close.png
│   ├── devices.png
│   ├── DSC04191.JPG
│   ├── error.png
│   ├── icons8-devices-32.png
│   ├── info.png
│   ├── menu.png
│   ├── microphone-icon.png
│   ├── monitor.png
│   ├── notification-icon.png
│   ├── notification.png
│   ├── power-icon.png
│   ├── restart.png
│   ├── search.png
│   ├── settings-icon - app.png
│   ├── settings.png
│   ├── shutdown-menu.png
│   ├── shutdown.png
│   ├── star.png
│   ├── success.png
│   ├── user-icon.png
│   └── warning.png
├── rc_resources.py
├── resources.qrc
├── screens
│   ├── AppMenu.qml
│   ├── Desktop.qml
│   └── Login.qml
├── startup.py
├── system
│   ├── config
│   │   ├── endpoints.json
│   │   ├── package_list.txt
│   │   ├── sys_config.cpp
│   │   ├── sys_config.out
│   │   ├── syslogs.log
│   │   └── system.ini
│   ├── __pycache__
│   │   ├── user_auth.cpython-310.pyc
│   │   └── utils.cpython-310.pyc
│   ├── user_auth.py
│   └── utils.py
├── VultureOS.pyproject
├── VultureOS.pyproject.user
├── wallpapers
│   ├── cubes.jpg
│   └── sunset flowers.png
└── widgets
    ├── AppCard.qml
    ├── ChangeTitle.js
    ├── MenuOption.qml
    ├── MessageBox.qml
    ├── NotificationPanel.qml
    ├── TextFieldIcon.qml
    ├── TextInputField.qml
    └── Topbar.qml

10 directories, 60 files

resources.qrc内容 #

<RCC>
    <qresource prefix="/Icons">
        <file>icons/back-arrow-64.png</file>
        <file>icons/battery-icon.png</file>
        <file>icons/cart.png</file>
        <file>icons/cart-solo.png</file>
        <file>icons/close.png</file>
        <file>icons/devices.png</file>
        <file>icons/error.png</file>
        <file>icons/icons8-devices-32.png</file>
        <file>icons/info.png</file>
        <file>icons/menu.png</file>
        <file>icons/microphone-icon.png</file>
        <file>icons/notification.png</file>
        <file>icons/notification-icon.png</file>
        <file>icons/power-icon.png</file>
        <file>icons/restart.png</file>
        <file>icons/search.png</file>
        <file>icons/settings.png</file>
        <file>icons/settings-icon - app.png</file>
        <file>icons/shutdown.png</file>
        <file>icons/shutdown-menu.png</file>
        <file>icons/star.png</file>
        <file>icons/success.png</file>
        <file>icons/user-icon.png</file>
        <file>icons/warning.png</file>
        <file>icons/account.png</file>
        <file>icons/monitor.png</file>
    </qresource>
    <qresource prefix="/screens">
        <file>screens/AppMenu.qml</file>
        <file>screens/Desktop.qml</file>
        <file>screens/Login.qml</file>
    </qresource>
    <qresource prefix="/Wallpapers">
        <file>wallpapers/cubes.jpg</file>
        <file>wallpapers/sunset flowers.png</file>
    </qresource>
</RCC>

解决方案 #

1. 修正资源路径错误 #

Settings.qml中设置的图标路径多了一层冗余的icons/，根据resources.qrc配置，正确路径应为：

btnIcon: "qrc:/Icons/monitor.png"

2. 确保资源文件正确编译 #

• 确认resources.qrc已添加到Qt项目的.pyproject文件中；
• 执行命令重新编译资源：rcc -binary resources.qrc -o resources.rcc，或在Qt Creator中右键资源文件选择"Compile"。

3. 调整Image组件的布局设置 #

Component.qml中btn_icon的锚定和margin设置可能导致图标被裁剪，修改为：

Image {
    id: btn_icon
    anchors.centerIn: parent
    sourceSize.height: 52
    sourceSize.width: 52
    fillMode: Image.PreserveAspectFit
    visible: true
}

4. 验证图片文件可用性 #

• 暂时改用相对路径测试：btnIcon: "../../icons/monitor.png"，若能显示则说明资源配置问题；
• 检查monitor.png文件是否损坏，或是否为Qt支持的图片格式。

内容的提问来源于stack exchange，提问作者Raghav