Ubuntu SDK: Having difficulty getting images to work in 'QML only app' when deploying to armhf device

When I deploy my QML only program to the desktop using the Ubuntu SDK, images that I have placed in the same folder as Main.qml can be accessed and displayed correctly in the application using source: "Pics/testpic.png"

When deployed to armhf device they cannot be accessed in this manner and instead results in errors like

QML QQuickImage: Cannot open: file:///opt/click.ubuntu.com

What is the best method to get the click package to incorporate a folder of pictures into the binary where they can be accessed and used by the application?

If I change the source to a web address it will happily show any picture I point it to, so it's able to display images fine but doesn't have access to my own images folder.

There is a similarish question here

Add image files in Ubuntu QML app with C++ plugins (qrc)

and koukouviou adds a footnote to his question:

I ended up creating a qmake project instead of a cmake project and achieved embedding the image in the binary. For my needs that's OK, since I'm just developing a simple proof-of-concept app

So 'embedding the image in the binary' sounds like exactly what I want to do.

Can anyone run through how to do this with me?

Just to note, I have attempted a number of 'stab in the dark' attempts at this.

• Added a .qrc file (which appears to be the solution for a 'qml with C++' app) but access via source: ":/Pics/testpic.png" or source: "qrc:/Pics/testpic.png" resulted in the same Cannot open: file etc.

• Also tried adding the folder in the project pane on the left of the SDK. It showed up under "extra files" but still seems to not be accessible when deployed to armhf device.

Any help with this would be very much appreciated.

Edit: A Quick Outline of Where I went Wrong...

Thanks to koukouviou for steering me onto the right path.

My main problem was that I started a QML App with Simple UI(qmake) project. I put it together and tested it by deploying to the Desktop and when I was happy enough with it I tried deploying to an armhf Device. It was then that I found that the images wouldn't show.

I had no C++ code in my project so it seemed unnecessary to be using any of the 'C++' project Templates, so I made some attempts to 'fix' my problem but I was still using the 'QML App with Simple UI' project Template.

Adding a QT Resource file to a QML App with Simple UI project looks like it should work: the .qrc file can be added and populated with your images but any reference to source: "qrc:/Pics/testpic.png" failed.

As far as I am aware it is not possible to use your own Image files with a 'QML App with Simple UI' and deploy it to an armhf Device.

After reading koukouviou's answer I finally thought I'd just have to bite the bullet and start a project using C++ code. This time I chose QtQuick App with QML UI (qmake) which has the description 'Creates a C++ Ubuntu application project with a sample UI containing a Label and a Button'.

As previously mentioned, I had avoided this before because I had no C++ code in my application & no real understanding of how to use C++ in this (or any) context, but I was glad to find that it wasn't necessary for me to adjust or add any C++ code and I could just make my changes to Main.qml and add my Image files to the Resources. There was, in fact, already a .qrc resource file in the project tree by default.

This is what I did to embed an image in the "binary":

I'm using a qmake project with the default folder structure in Ubuntu SDK. I made a directory to store my images: project_name/backend/your_click/images. With the backend folder I created a new resource file resource_file.qrc that contains the following:

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
    <file>images/bigredbutton.png</file>
</qresource>
</RCC>

To create the qrc file I think you can right-click, Add New ..., Qt, Qt Resource File and manually edit the file, or manually create it from scratch. I don't remember which one worked for me, try them out and let me know, I will edit the answer for others that may run into the same problem in the future.

In my Main.qml file I use the image like this:

Image {
    id: btn
    width: 250; height: 250
    fillMode: Image.PreserveAspectFit
    source: "qrc:images/bigredbutton.png"
    MouseArea {
    ...
    }

Here's a screenshot of my project structure, it might help.