Adding an image to a simple QML app

[tomy]

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?

[oria66]

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!

[tomy]

@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?

[SGaist]

Hi,

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.

[tomy]

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

[SGaist]

What issue was that ?

[tomy]

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

[SGaist]

So it was indeed qrc: that was missing ?

[tomy]

@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.