Home > Mobile >  How to use QRC files in QML files?
How to use QRC files in QML files?

Time:09-24

I have an app that I have been working on and recently I heard about qml and qrc file systems and before this, I had been only using PySide6 and qss. So I have been using qml to make a GUI for this app but I have run into a wall. I want to give a button an icon so in my qrc file I wrote this:

<!DOCTYPE RCC>
<RCC version="1.0">
<qresource>
    <file>menu_icons/menu.png</file>
</qresource>
</RCC>

and to give my button the icon I wrote this:

Button {
            id: "menu_toggle_button"
            
            text: qsTr("Menu")

            flat: true
            width: menu.width

            font.family: "Times New Roman"
            font.pointSize: 20

            icon.source: ":/menu_icons/menu.png"
}

But this doesn't seem to work, when I run the code I get this message:

file:///C:/Users/User/AppData/Local/Programs/Python/Python39/lib/site-packages/PySide6/qml/QtQuick/Controls/Material/Button.qml: QML IconImage: Cannot open: file:///C:/Users/User/AppData/Local/Programs/Python/Python39/lib/site-packages/PySide6/qml/QtQuick/Controls/Material/:/menu_icons/menu.png

Here is my python code:

import sys

from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine

app = QGuiApplication(sys.argv)

engine = QQmlApplicationEngine()
engine.quit.connect(app.quit)
engine.load('main.qml')

sys.exit(app.exec())

I have tried changing the icon.source: ":/menu_icons/menu.png" to icon.source: "qrc:/menu_icons/menu.png" but that just changed the error message to include qrc:/ instead of just :/

So what am I doing wrong?

CodePudding user response:

You have to do the following:

  1. Convert the .qrc to .py: pyside6-rcc resources.qrc -o resources_rc.py.

  2. Add import resources_rc into the main.py

  3. Use the fullpath: icon.source: "qrc:/menu_icons/menu.png".

  • Related