Image from resource is not loading in Qt QML

Question

I'm working on a Qt QML project, and I'm trying to display a simple image within my window, but nothing is displayed except for an empty window.

I put my image in a resource file (qrc), and I provided the source with its exact path.

Main.qml

import QtQuick 2.4
import QtQuick.Window 2.4

Window {
    width: 400
    height: 400


        Image {
            id: image
            x: 0
            y: 0
            width: 400
            height: 400
            source: "1.PNG"
            fillMode: Image.PreserveAspectFit
        }

    visible: true
}

Pics.qrc

<RCC>
    <qresource prefix="/pics">
        <file>1.PNG</file>
    </qresource>
</RCC>

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>


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

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

    return app.exec();
}

How do I display 1.PNG in my window?

Answer 1

Based on this answer, you have to make the following modifications to your project:

CMakeLists.txt:

cmake_minimum_required(VERSION 3.16)

project(ExplainQML VERSION 0.1 LANGUAGES CXX)


set(CMAKE_CXX_STANDARD_REQUIRED ON)
########add this line to compile qrc file to rcc
set(CMAKE_AUTORCC ON)                   
########


find_package(Qt6 6.4 REQUIRED COMPONENTS Quick)

qt_standard_project_setup()

qt_add_executable(appExplainQML
    main.cpp
    #########add the resource file to your project
    res.qrc
    #############
)

qt_add_qml_module(appExplainQML
    URI ExplainQML
    VERSION 1.0
    QML_FILES Main.qml
)

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

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

change source in main.qml to this:

source: "qrc:/pics/1.PNG"

Your qrc file also needs to be changed to the following:

<!DOCTYPE RCC><RCC version="1.0">
<qresource prefix="/pics/">
    <file alias="1.PNG">pics/1.PNG</file>
</qresource>
</RCC>

Note: if you change the file you're using or use more than one, be sure to modify your project accordingly, specifically qrc file and main.qml.