Important: Please read the Qt Code of Conduct -

Adding an image to a simple QML app

  • Well, it's making me cray. I've forgotten the right way and it's more than one hour wasting my time without success yet!

    1- I created an Empty Application called test_2 and added this code in main.qml:

    import QtQuick 2.12
    Image {
        id: root
        source: "images/background.png"

    2- Copied the folder containing the images named images into the project folder
    3- Right click on the name of the project -> Add New -> Qt -> Qt Resource File -> Name: images
    4- Right click on the images.qrc > Add Existing folder (images)

    Now it's a screenshot too:


    Now when running the app by Desktop, nothing will be shown!! :(

    Where did I go wrong please?

  • Hello @tomy .

    Just an image component in your main.qml doesn't show in your application. You must wrap it in a Window component. However, I don't know why you create a new .qrc...

    Maybe this can help you, I do it with one .qrc.


    Good luck and happy new year!

  • @oria66
    Hello, and first off, Happy New Year to you too. :)
    Thanks it solved the issue and it works and looks better now.


    You must wrap it in a Window component

    Is Window the only component that can solve the issue or might there be other components to wrap the Image and show the result please?

  • Lifetime Qt Champion


    Did you try to use the qrc:/ prefix for the path ?
    Since you have two different .qrc files, I don't think (but I may be wrong) that the relative path can be used.

  • @SGaist
    It was an issue, now solved. :)

  • Lifetime Qt Champion

    What issue was that ?

  • @SGaist
    I've illustrated it in the first post.

  • Lifetime Qt Champion

    So it was indeed qrc: that was missing ?

  • @SGaist
    No dear.

    There's no need to add another qrc file indeed. I merely added a new directory (containing the images) to the existing qrc file and wrapped the Image item by a Window item then ran the app.

Log in to reply