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

Question

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!

score 0 · Answer 1 · edited Mar 10 '21 at 05:34

0

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

edited Mar 10 '21 at 05:34

eyllanesc

235,170
19
170
241

answered Mar 10 '21 at 05:29

Vildan ÇAKMAK

1

It is better to post code as actual text inside the answer rather than an image. This way the OP can easily copy-paste and try it... – Tomerikoo Mar 17 '21 at 20:50

score 0 · Answer 2 · answered Feb 16 '22 at 18:04

0

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.

answered Feb 16 '22 at 18:04

melaz123

1
1

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

2 Answers2