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

cqmlqtubuntu-sdkubuntu-touch

I'm writing an Ubuntu QML (phone) App with C++ plugins using ubuntu-sdk. My app includes a png image and in order to include the image in the binary (so it shows on the phone) I have created a qrc file.

My qrc file looks like this:

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

I've tried what QML app with C++ plugin (cmake) adding resource file suggests and got the Desktop version to work. However, when I run the app on my Aquaris E4.5 the image doesn't show up and I get the following error:

QML QQuickImage: Cannot open:
file:///opt/click.ubuntu.com/ProjectName.Nickname/0.1/share/qml/app/graphics/bigredbutton.png

The image I want to show is stored in the /ProjectName/app/graphics directory. I'm including the qrc file within the backend directory, and added the lines the linked question indicates in the CMakeLists.txt within the backend directory:

set(CMAKE_AUTORCC ON) 
qt5_add_resources(RESOURCES modules/ProjectName/myres.qrc)

Where should the image/qrc files be stored, or what other configuration is necessary for packing the image in the binary and launching the app successfully on an Ubuntu Phone?

I'm on Ubuntu 15.10 using the latest ubuntu-sdk version.

Best Answer

This is what worked for me.
My resources.qrc is in {PROJECT_DIR}/resources:

<RCC>
    <qresource prefix="/180">
        <file alias="five">180/five_180.png</file>
        ...
    </qresource>
</RCC>

In my backend/CMakeLists.txt I have: 

qt5_add_resources(RESOURCE_ADDED ${CMAKE_SOURCE_DIR}/resources/resources.qrc)
...
add_library(Projectnamebackend MODULE
    ${RESOURCE_ADDED}
)
...
add_custom_target(Projectnamebackend-qmldir ALL
    COMMAND cp ${CMAKE_CURRENT_SOURCE_DIR}/modules/Projectname/qmldir ${CMAKE_CURRENT_BINARY_DIR}/Projectname
    DEPENDS ${QMLFILES} ${RESOURCE_ADDED}
)

I can then use the images in a .cpp-file like this: 

m_image = QImage(":/180/one");

The project has the default example-app structure, given by the IDE.
I hope this helps.

Related Question