Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML Image: Cannot open - CMake qrc
QtWS25 Last Chance

QML Image: Cannot open - CMake qrc

Scheduled Pinned Locked Moved Solved QML and Qt Quick
qt6.5qmlqrccmakeqtcreator 10.0
13 Posts 8 Posters 6.0k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    Kevin470
    wrote on 13 Apr 2023, 08:05 last edited by
    #1

    Hello,
    I believe I have asked this question under the wrong "General and Desktop" topic last time - https://forum.qt.io/topic/144329/qml-image-cannot-open-cmake-qrc

    This should have been the topic under which I should have asked it.

    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.

    My directory structure looks like this:
    dea0544d-25aa-4410-bb81-74084bd96497-image.png

    Thank you so much in advance.

    J A 2 Replies Last reply 13 Apr 2023, 15:09
    2
    • J Offline
      J Offline
      JohnKS
      wrote on 18 Apr 2023, 23:08 last edited by JohnKS
      #6

      Was facing the same problem too, i found out that i need to add

      set(CMAKE_AUTORCC ON)
      

      to the cmake file and it's working now.
      Try adding it this may be the answer to your problem

      Edit : make sure to add this line before the

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

      line

      K C F 3 Replies Last reply 19 Apr 2023, 05:26
      2
      • K Kevin470
        13 Apr 2023, 08:05

        Hello,
        I believe I have asked this question under the wrong "General and Desktop" topic last time - https://forum.qt.io/topic/144329/qml-image-cannot-open-cmake-qrc

        This should have been the topic under which I should have asked it.

        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.

        My directory structure looks like this:
        dea0544d-25aa-4410-bb81-74084bd96497-image.png

        Thank you so much in advance.

        J Offline
        J Offline
        JoeCFD
        wrote on 13 Apr 2023, 15:09 last edited by JoeCFD
        #2

        @Kevin470 try to find the qrc_resources.cpp file under Build Dir. Open it in an editor and scroll all way to the bottom. You will be able to see the right path of linux.png. Use that path in your qml code.

        K 1 Reply Last reply 17 Apr 2023, 06:13
        1
        • J JoeCFD
          13 Apr 2023, 15:09

          @Kevin470 try to find the qrc_resources.cpp file under Build Dir. Open it in an editor and scroll all way to the bottom. You will be able to see the right path of linux.png. Use that path in your qml code.

          K Offline
          K Offline
          Kevin470
          wrote on 17 Apr 2023, 06:13 last edited by
          #3

          @JoeCFD Thank you so much for responding. The build directory does not have the qrc_resources.cpp file that you meant. These are all the cpp files generated after building the project.
          27ad36ec-ae1d-4af3-b37f-4b01e3991d6f-image.png

          Is there something else that I could be doing wrong? The project has successfully included the qrc file to be seen and interacted with on Qt Creator. But after build and run, it is disregarded.

          J 1 Reply Last reply 17 Apr 2023, 14:08
          0
          • K Kevin470
            17 Apr 2023, 06:13

            @JoeCFD Thank you so much for responding. The build directory does not have the qrc_resources.cpp file that you meant. These are all the cpp files generated after building the project.
            27ad36ec-ae1d-4af3-b37f-4b01e3991d6f-image.png

            Is there something else that I could be doing wrong? The project has successfully included the qrc file to be seen and interacted with on Qt Creator. But after build and run, it is disregarded.

            J Offline
            J Offline
            JoeCFD
            wrote on 17 Apr 2023, 14:08 last edited by
            #4

            @Kevin470 can you show your resources.qrc for your images files here?

            K 1 Reply Last reply 18 Apr 2023, 05:33
            0
            • J JoeCFD
              17 Apr 2023, 14:08

              @Kevin470 can you show your resources.qrc for your images files here?

              K Offline
              K Offline
              Kevin470
              wrote on 18 Apr 2023, 05:33 last edited by
              #5

              @JoeCFD
              This is the directory in which the resource.qrc file is present. I hope this is what you mentioned

              786d0664-9f4b-403e-929a-e02fc63957c1-image.png

              <RCC>
                  <qresource prefix="/images">
                      <file>linux.png</file>
                  </qresource>
              </RCC>
              
              
              1 Reply Last reply
              0
              • J Offline
                J Offline
                JohnKS
                wrote on 18 Apr 2023, 23:08 last edited by JohnKS
                #6

                Was facing the same problem too, i found out that i need to add

                set(CMAKE_AUTORCC ON)
                

                to the cmake file and it's working now.
                Try adding it this may be the answer to your problem

                Edit : make sure to add this line before the

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

                line

                K C F 3 Replies Last reply 19 Apr 2023, 05:26
                2
                • K Kevin470 has marked this topic as solved on 19 Apr 2023, 05:17
                • J JohnKS
                  18 Apr 2023, 23:08

                  Was facing the same problem too, i found out that i need to add

                  set(CMAKE_AUTORCC ON)
                  

                  to the cmake file and it's working now.
                  Try adding it this may be the answer to your problem

                  Edit : make sure to add this line before the

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

                  line

                  K Offline
                  K Offline
                  Kevin470
                  wrote on 19 Apr 2023, 05:26 last edited by
                  #7

                  @JohnKS This works. Thank you so much.

                  1 Reply Last reply
                  0
                  • K Kevin470
                    13 Apr 2023, 08:05

                    Hello,
                    I believe I have asked this question under the wrong "General and Desktop" topic last time - https://forum.qt.io/topic/144329/qml-image-cannot-open-cmake-qrc

                    This should have been the topic under which I should have asked it.

                    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.

                    My directory structure looks like this:
                    dea0544d-25aa-4410-bb81-74084bd96497-image.png

                    Thank you so much in advance.

                    A Offline
                    A Offline
                    ajaxqt
                    wrote on 26 May 2023, 02:45 last edited by
                    #8

                    @Kevin470 think you!it also works with me.

                    1 Reply Last reply
                    0
                    • J JohnKS
                      18 Apr 2023, 23:08

                      Was facing the same problem too, i found out that i need to add

                      set(CMAKE_AUTORCC ON)
                      

                      to the cmake file and it's working now.
                      Try adding it this may be the answer to your problem

                      Edit : make sure to add this line before the

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

                      line

                      C Offline
                      C Offline
                      Colins2
                      wrote on 2 Jun 2023, 11:17 last edited by
                      #9

                      @JohnKS said in QML Image: Cannot open - CMake qrc:

                      set(CMAKE_AUTORCC ON)

                      I found that if I add the line "qml/resources/resource.qrc" where you suggest I get a compile error.
                      I simply added resource.qrc to the modules section like this:
                      qt_add_qml_module(appBasicElementsDemoImage
                      URI BasicElementsDemoImage
                      VERSION 1.0
                      QML_FILES Main.qml resource.qrc

                      Adding the set(CMAKE_AUTORCC ON) worked just fine.

                      C 1 Reply Last reply 3 Jun 2023, 05:20
                      1
                      • C Colins2
                        2 Jun 2023, 11:17

                        @JohnKS said in QML Image: Cannot open - CMake qrc:

                        set(CMAKE_AUTORCC ON)

                        I found that if I add the line "qml/resources/resource.qrc" where you suggest I get a compile error.
                        I simply added resource.qrc to the modules section like this:
                        qt_add_qml_module(appBasicElementsDemoImage
                        URI BasicElementsDemoImage
                        VERSION 1.0
                        QML_FILES Main.qml resource.qrc

                        Adding the set(CMAKE_AUTORCC ON) worked just fine.

                        C Offline
                        C Offline
                        Colins2
                        wrote on 3 Jun 2023, 05:20 last edited by Colins2 6 Mar 2023, 05:21
                        #10

                        @Colins2 It is maybe also worth noting that in the CMakelists template for a Qt Widgets application, i.e. a C++ app, the set(CMAKE_AUTORCC ON) statement is present by default.
                        I have now added this to my QtQuick template to avoid future problems.

                        1 Reply Last reply
                        0
                        • L Offline
                          L Offline
                          leo738
                          wrote on 21 Jun 2023, 20:35 last edited by leo738
                          #11

                          This post seem to work for me:

                          https://doc.qt.io/qt-6/cmake-build-qml-application.html

                          I didn't need to add

                          set(CMAKE_AUTORCC ON)
                          

                          Relevant part of CMakeLists.txt:

                          qt_add_qml_module(appqmlDemo
                              URI qmlDemo
                              VERSION 1.0
                              QML_FILES
                                  Main.qml
                              RESOURCES
                                  images/menu_24px.png
                          )
                          

                          My project structure:

                          ├── CMakeLists.txt
                          ├── CMakeLists.txt.user
                          ├── images
                          │   └── menu_24px.png
                          ├── main.cpp
                          ├── Main.qml
                          

                          I used the image in the qml file as:

                          ToolButton {
                                      id: menuButton
                                      anchors.left: parent.left
                                      anchors.verticalCenter: parent.verticalCenter
                                      icon.source: "images/menu_24px.png"
                                      onClicked: drawer.open()
                                  }
                          
                          EddyE 1 Reply Last reply 26 Apr 2024, 11:27
                          2
                          • L leo738
                            21 Jun 2023, 20:35

                            This post seem to work for me:

                            https://doc.qt.io/qt-6/cmake-build-qml-application.html

                            I didn't need to add

                            set(CMAKE_AUTORCC ON)
                            

                            Relevant part of CMakeLists.txt:

                            qt_add_qml_module(appqmlDemo
                                URI qmlDemo
                                VERSION 1.0
                                QML_FILES
                                    Main.qml
                                RESOURCES
                                    images/menu_24px.png
                            )
                            

                            My project structure:

                            ├── CMakeLists.txt
                            ├── CMakeLists.txt.user
                            ├── images
                            │   └── menu_24px.png
                            ├── main.cpp
                            ├── Main.qml
                            

                            I used the image in the qml file as:

                            ToolButton {
                                        id: menuButton
                                        anchors.left: parent.left
                                        anchors.verticalCenter: parent.verticalCenter
                                        icon.source: "images/menu_24px.png"
                                        onClicked: drawer.open()
                                    }
                            
                            EddyE Offline
                            EddyE Offline
                            Eddy
                            wrote on 26 Apr 2024, 11:27 last edited by Eddy
                            #12

                            @leo738
                            Thx
                            Still works for Qt6.6.1 and Qt Creator 12.0.0

                            Qt Certified Specialist
                            www.edalsolutions.be

                            1 Reply Last reply
                            0
                            • J JohnKS
                              18 Apr 2023, 23:08

                              Was facing the same problem too, i found out that i need to add

                              set(CMAKE_AUTORCC ON)
                              

                              to the cmake file and it's working now.
                              Try adding it this may be the answer to your problem

                              Edit : make sure to add this line before the

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

                              line

                              F Offline
                              F Offline
                              fixgoats
                              wrote on 22 Sept 2024, 03:25 last edited by
                              #13

                              @JohnKS Wow, I just spent like an hour trying to figure this out and copying detailed tutorials verbatim to try and get it working and it's this non-default flag that apparently doesn't always need to be set seeing as it doesn't appear anywhere in Qt's examples. It would be really helpful if this was mentioned more prominently somewhere.

                              1 Reply Last reply
                              0

                              • Login

                              • Login or register to search.
                              • First post
                                Last post
                              0
                              • Categories
                              • Recent
                              • Tags
                              • Popular
                              • Users
                              • Groups
                              • Search
                              • Get Qt Extensions
                              • Unsolved