QML Image Cannot open CMake qrc

Kevin470

Hello,
I have learnt a bit of Qt Core and Qt Widgets and worked out a few small projects with them. I am starting to learn QML and most of the tutorials out there (including KDAB in YouTube) show compiling and building using .pro files.
I have Qt 6.5 and Qt Creator 10.0 installed at the moment and I would like to learn it using CMake.

I have the same problem as this person here on Stack Overflow - https://stackoverflow.com/questions/71011319/image-not-displaying-qt6-c-cmake

I added an image file to a .qrc resource file and I am trying to display that image. Every time the project runs, I get this message qrc:/qml_testing/qml/Main.qml:10:5: QML Image: Cannot open: qrc:/images/linux.png. The QML Debugger Console is empty.

CMakeLists.txt file:

cmake_minimum_required(VERSION 3.16)

project(qml_testing VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)

find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)

qt_standard_project_setup()

qt_add_executable(appqml_testing
    main.cpp
    qml/resources/resource.qrc
)

qt_add_qml_module(appqml_testing
    URI qml_testing
    VERSION 1.0
    QML_FILES qml/Main.qml
)

set_target_properties(appqml_testing 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(appqml_testing
    PRIVATE Qt6::Quick
)

install(TARGETS appqml_testing
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR})

main.cpp file:

#include <QGuiApplication>
#include <QQmlApplicationEngine>


int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/qml_testing/qml/Main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreationFailed,
        &app, []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

Main.qml file:

import QtQuick
import QtQuick.Window

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

    Image {
        id: image
        source: "qrc:/images/linux.png"
        anchors.centerIn: parent
    }
}

P.S - I enabled the QmlDesigner plugin and tried to drag and drop an image on the screen and select the source from the resource. The Designer shows the image on the display, but when the project is run, the screen is empty.

Thank you so much in advance.

Kevin470

My directory structure looks like this:

hy888888

你可以尝试这种写法
Image {
x:0
y:0
width: 1920
height: 1080
//source:"file:///F:/CodeQt/untitled/image/2k.jpg"//绝对路径
source:"file:./image/2k.jpg"//相对路径
}

semlanik

@Kevin470
The qt_standard_project_setup function doesn't set CMAKE_AUTORCC flag, only UIC and MOC. So you need to add:

set(CMAKE_AUTORCC ON)

before calling qt_add_executable.