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).

Answer 1

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.

Answer 2

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

will work if the working directory is set to the ApplicationFolder

note: when running from QtCreator, double check what directory the application is actually running in (i had my application run in my home directory even though the working directory was set correctly in the run configuration (after running it once in a terminal window this magically fixed itself) )