Can't load Image source in QML Image on Raspberry Pi

Question

I'm cross compiling a Qt project using Qt Creator and I'm getting the following error:

qrc:/main.qml:26:25: QML Image: Cannot open: qrc:/images/imgA.png

The directory structure on target device is:

.
└── ProjectA/
    └── bin/
        └── res/
            └── images/
                ├── imgA.png
                └── imgB.png

And the directory structure on Host PC is:

.
└── ProjectA/
    ├── ProjectA.pro
    ├── src/
    │   └── All source Files
    └── res/
        ├── main.qml
        ├── main.qrc
        └── images/
            ├── imgA.png
            └── imgB.png

When I compile and execute the program on my host PC every thing is working fine

EDIT Here is the main.qrc:

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
    <qresource prefix="/images">
        <file alias="imgA" >images/imgA.png</file>
        <file alias="imgB" >images/imgB.png</file>
    </qresource>
</RCC>

The main.qml:

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Image {
        id: testImg
        source: "images/images/imgA.png"
    }

And here is the qmake project file:

QT += quick core network

CONFIG += c++17

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
INCLUDEPATH += src/
SOURCES += \
        src/Property.cpp \
        src/Weather.cpp \
        src/main.cpp

RESOURCES += res/qml.qrc

# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH =

# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH =


install_config.path = /home/dietpi/QtProjects/$${TARGET}/bin/Data/
install_config.files = Data/*


INSTALLS += \
    install_config \

# Default rules for deployment.
target.path = /home/dietpi/QtProjects/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

HEADERS += \
    src/Property.hpp \
    src/Weather.hpp

DISTFILES += \
    res/main.qml \

Answer 1

Here is a code snipped for you.

qml.qrc

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

    <qresource prefix="/images">
    <file alias="logo.jpg">images/logo.jpg</file>
    </qresource>
</RCC>

And here is a main.qml

import QtQuick 2.14
import QtQuick.Window 2.14

Window {
   visible: true
   width: 640
   height: 480
   title: qsTr("Hello World")

   Image {
      id : imgItem
      anchors.fill: parent
      source: "qrc:/images/logo.jpg"
   }
}

Answer 2

I encounter the same nasty problem, even on different PC having the same Qt installation. It works fine when I added a final slash to every prefix in the qrc file:

<qresource prefix="/images/">

After that, I delete all.qrc cached and I recompile, and it works fine.

Answer 3

As described in The Qt Resource System , you should use qrc:///path or :/path .

It seems qrc:/path is not working on some platforms.

Update:

Since you are using qresource prefix in .main.qrc , you need to use :/images/images/ path to image files. Or move all images into the parent folder ( res/ ).

Answer 4

Looking at your resource file, you are using an alias. That means you have to use the alias name when referencing it. So try accessing it like this:

    Image {
        id: testImg
        source: "qrc:/images/imgA"    // Note, there is no '.png'
    }