QML: how to specify image file path relative to application folder

Question

We are developing our first Qt/QML application (trying technology). While technology looks very promising at a glance, we have faced so many unexpected weird issues that almost give up at very beginning.

Here one of such issue.

We want the following folders layout for our application:

--> ApplicationFolder
|--> qml        // QML files (also structured by subfolders)
|--> resources  // Application resources (images, sounds, data-files, etc.)
| |--> images   // Image resources (also structured by subfolders)
| |--> data     // Different data files
| |--> ...      // Other resources
|--> Application.exe   // Application executable
|--> *.dll             // DLLs application depends on

The problem is that in order to specify image file for Image QML item we have to use path relative to QML file?! This is absolutely insane. During development files sometimes moved between folders (you move QML file and have to fix all the path it has?!); some different QML files have to refer to same image (same image resource but different actual path in different QML files).

So the question is: how to specify image path relative to application folder? Is it possible at all?

Thanks in advance!

PS. Using Qt's resource system (when resources are embedded into executable) is not an option in our case. We need raw resources on disk (including QML files itself, at least during development phase).

PPS. Wrote this question after spending a whole day to resolve the issue by myself via documentation/google/stackoverflow; no success at all (most examples use resource embedding, others are too simple and just use relative paths).

This is absolutely insane. During development files sometimes moved between folders (you move QML file and have to fix all the path it has ?!); -> What is insane about developing during the development phrase? Obviously if you do not design it properly, just do cargo-cult programming, you may need to reimplement stuff with new design. Is it also insane that you rename something everywhere when you rename something 'cause you realize that you have given wrong name to a variable? Come on, Alexey... :) Sed is your friend ... — lpapp
@lpapp This is insane because if image file stay at the same place, then it is absolutely normally to wish the reference to this file stay the same in application code and do not depend on moving other things. Isn't ? If some QML file refer to some image and this image stay at the same place all the time, why one need to fix that QML each time he want to move it to other folder ? That is what I am talking about. When using qrc files you have no such problem, but with raw resources we just can't find a solution unfortunately. — Alexey Kryshen

Mitch Mitch · Accepted Answer · 2014-12-18T22:32:03

If you can't use a .qrc file for your images, you could try this:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlContext>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.rootContext()->setContextProperty("applicationDirPath", QGuiApplication::applicationDirPath());
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

In QML, you'd then do:

Image {
    source: "file:///" + applicationDirPath + "/../resources/images/image.png"
}

Note that this code is not tested.

QML: how to specify image file path relative to application folder

3 Answers