QT6 Qml image on executable app or 2D view of design mode but not both

Question

I'm migrating a simple desktop app to QT5 qmake to QT 6.5 cmake. I'm having issues displaying images on both executable app and design mode 2D view of QT Creator.

I made a step back creating an app as simple as it can be with just one image in the middle of the window. I added a new .qrc resource file to the app and added it to qt_add_executable into cmakelist file. Added my image to the resources and edit the Main.qml as follow:

Cmakelist.txt

cmake_minimum_required(VERSION 3.16)

project(demoimage VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)

qt_standard_project_setup()

qt_add_executable(appdemoimage
    main.cpp
    Images.qrc
)

qt_add_qml_module(appdemoimage
    URI demoimage
    VERSION 1.0
    QML_FILES Main.qml
)

set_target_properties(appdemoimage PROPERTIES
    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

target_link_libraries(appdemoimage
    PRIVATE Qt6::Quick
)

install(TARGETS appdemoimage
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

Main.qml

import QtQuick
import QtQuick.Window

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    
    Image{
        id: baloon
        anchors.fill: parent
        source: "qrc:/baloon.png"
        anchors.leftMargin: 80
        anchors.topMargin: 80
        anchors.rightMargin: 80
        anchors.bottomMargin: 80
    }
}

Images.qrc

<RCC>
    <qresource prefix="/">
        <file>baloon.png</file>
    </qresource>
</RCC>

The executable shows the image as expected. In the 2D view of QT Creator Design mode, the image frame is in the right position but it do not diplay the image itself.

If I change the Image source attribute to: source: "baloon.png", the image appears in the Design mode but not anymore in the exectubable.

I tryed to a add the image under qt_add_resources of the cmakelist file instead of using .qrc file but the behaviour is the same.

Someone can solve my issue?

Answer 1

please use the below code in cmake file:

set(CMAKE_AUTORCC ON)

cmake:

cmake_minimum_required(VERSION 3.16)

project(TestProjectSF VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_AUTORCC ON)
find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)

qt_standard_project_setup()

qt_add_executable(appTestProjectSF
    main.cpp

    image.qrc
)

qt_add_qml_module(appTestProjectSF
    URI TestProjectSF
    VERSION 1.0
    QML_FILES Main.qml

#    baloon.png
)

set_target_properties(appTestProjectSF PROPERTIES
    MACOSX_BUNDLE_GUI_IDENTIFIER my.example.com
    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}
    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}
    MACOSX_BUNDLE TRUE
    WIN32_EXECUTABLE TRUE
)

target_link_libraries(appTestProjectSF
    PRIVATE Qt6::Quick
)

install(TARGETS appTestProjectSF
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

main.qml:

import QtQuick
import QtQuick.Window

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


    Image{
        id: baloon

        cache: true
        anchors.fill: parent
        source: "qrc:/baloon.png"
        anchors.margins: 80
    }
}

result: