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.