Access image in qresource file from QML

Question

I'm attempting to port my C++ Qt application to use PySide2. Within my QML I have the following:

# test.qml
Image {
    Layout.fillWidth: true
    Layout.leftMargin: 5
    Layout.rightMargin: 5
    source: "qrc:/resources/images/logo.svg" # <-- Problematic line
    fillMode: Image.PreserveAspectFit
    asynchronous: true
}

My logo.svg file is referenced inside of my resources.qrc file like so:

<RCC>
    <qresource prefix="/">
        <file>resources/images/logo.svg</file>
    </qresource>
</RCC>

main.py looks like:

import sys

from PySide2.QtGui import QGuiApplication
from PySide2.QtQml import QQmlApplicationEngine
from PySide2.QtCore import QUrl

import qml_rc

if __name__ == '__main__':
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    engine.load("qrc:/qml/main.qml")

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec_())

qml.qrc looks like:

<RCC>
    <qresource prefix="/">
        <file>qml/main.qml</file>
        <file>qml/test.qml</file>
    </qresource>
</RCC>

I compile my resources QRC file by running: $ pipenv run pyside2-rcc -o src/ui/resources_rc.py src/ui/resources.qrc.

Then I compile my QML QRC file by running: pipenv run pyside2-rcc -o src/ui/qml_rc.py src/ui/qml.qrc

Then I run my program using the following command: pipenv run python src/ui/main.py

The UI will popup, but with some errors in the console, notably:

qrc:/qml/test.qml:25:9: QML Image: Cannot open: qrc:/resources/images/logo.svg

Answer 1

In the same way that you import qml_rc you also have to do with resources_rc:

import qml_rc
import resources_rc

Note: The names of the files that are used as components must be capitalized as indicated by rule M16, I suppose that test.qml is just a name used for the example, in my test I used Test.qml.