'Qml works when run but will not load photos in Qt designer

When working on a small qml project I found this behavior and I am not sure if I am doing anything wrong or if this is just how it is.

I created a simple test file Test.qml along with the main.qml and main.cpp 

import QtQuick 2.0

Item {
width: 212
height: 212
Image {
    id: image
    x: 0
    y: 22
    width: 212
    height: 168
    source: "images/PaperSpeed.png"
    fillMode: Image.PreserveAspectFit
}

}

The image linked in source above

shows the actual image in designer

but fails to show the image when running

I go ahead and change the source to the qrc URL: 

source: "qrc:/img/images/PaperSpeed.png"

but now it fails to show up in designer

and instead shows up when running

What I find even weirder The image does show up in designer when on the Test.qml file but does not show up in designer when on the main.qml file for both source cases

my .pro file:

QT += quick

CONFIG += c++11

DEFINES += QT_DEPRECATED_WARNINGS

SOURCES += \
    main.cpp

RESOURCES += qml.qrc

QML_IMPORT_PATH =


QML_DESIGNER_IMPORT_PATH =

qnx: target.path = /tmp/$${TARGET}/bin
 else: unix:!android: target.path = /opt/$${TARGET}/bin
 !isEmpty(target.path): INSTALLS += target

and the qrc file:

<RCC>
    <qresource prefix="/">
        <file>Thermostat.qml</file>
        <file>main.qml</file>
        <file>Test.qml</file>
    </qresource>
    <qresource prefix="/img">
        <file>images/PaperSpeed.png</file>
    </qresource>
    </RCC>

This did seem to happen out of no where when I tried to import a new module like QtQuickContols eventually got rid of it but the problem persisted.

I have tried messing around with the QML emulation layer and moving the files around within the qrc. Anyone have any ideas as to what I can try or what may be going on?

Sorry in advance for any formatting issue!

qtqmlqtquick2qtquick-designer


Solution 1:[1]

I had same issue. It solves if i add an image to window. Check the exaple below. I have same result if i remove test image from window.

main.qml

Solution 2:[2]

For anyone still looking at this, what worked for me is separating the UI elements into a .ui.qml and the backend logic into a .qml file. This does a better job at loading UI elements and pictures when the .ui.qml file is opened in designer.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 eyllanesc
Solution 2 melaz123

Related Questions