How to reference an image in QML

a.burks

I'm a Java and Objective-C developer and new at Qt to develop apps on Sailfish OS. Therefore my question may sounds trivial for the most of you. I've created a simple example app to display an image for different page orientations on a smart phone.

Therefore I have created a folder named "res" right under the root of the project directory. This resource folder contains the image "image.jpg".

Afterwards I have added the resource to my example project. Thus the example project file "MyPageOrientationExample.pro" contains the following lines:

DISTFILES += \
    rpm/MyPageOrientationExample.spec \
    res/image.jpg

In my QML code I have defined an image:

      Image {
                 id: image

                 anchors {
                     top: header.bottom
                     horizontalCenter: page.isPortrait ? parent.horizontalCenter : undefined
                 }

                 sourceSize.width: {
                     var maxImageWidth = page.width
                     var leftMargin = Theme.horizontalPageMargin
                     var rightMargin = page.isPortrait ? Theme.horizontalPageMargin : 0
                     return maxImageWidth - leftMargin - rightMargin
                 }

                 fillMode: Image.PreserveAspectFit
                 source: "../res/image.jpg"
             }

If I build an run the project, I get the following error:

[D] unknown:0 - QML debugging is enabled. Only use this in a safe environment.
[D] unknown:0 - Using Wayland-EGL
[W] unknown:46 - file:///usr/share/MyPageOrientationExample/qml/MyPageOrientationExample.qml:46:14: QML Image: Cannot open: file:///usr/share/MyPageOrientationExample/res/image.jpg

Can someone help me?

SGaist

Hi and welcome to devnet,

You are using a relative path. Since you are likely using Qt Creator, your application is built in an out of source folder (aka shadow build) which is not your source tree hence your error.

You should consider using Qt's resources system to embed that image into your application.

a.burks

Thanks for your response. Maybe other Qt beginners will have the same question. Thus I would like to summarise my solution:

Select "Add" from the context menu of the project in QtCreator
Select "Qt" and "QT Resource File" in the popup window
Create a name for the resource file
Select "Add Directory" from the context menu of the resource file
Select your resource folder of the project within the popup window

Im my code I used the following path:

source: "qrc:///res/image.jpg"

SGaist

Nice summary !

Since you have it working now, please mark the thread as solved using the "Topic Tools" button so that other forum users may know a solution has been found :)