CODEWITHSUNDEEP
qtqmlqtquick2
Alexey Kryshen
Alexey Kryshen

Reputation: 1117

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

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

Upvotes: 22

Views: 41824

Answers (4)

alexsb
alexsb

Reputation: 1

Since QT 6.0 you have the following convenience method:

https://doc.qt.io/qt-6/qqmlapplicationengine.html#setExtraFileSelectors

Sets the extraFileSelectors to be passed to the internal QQmlFileSelector used for resolving URLs to local files. The extraFileSelectors are applied when the first QML file is loaded. Setting them afterwards has no effect.

In case of PySide6 you would use it as following:

from pathlib import Path
import sys

from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine

if __name__ == "__main__":
    app = QGuiApplication(sys.argv)
    engine = QQmlApplicationEngine()
    app_root_path = Path(__file__).parent
    engine.setExtraFileSelectors(app_root_path.as_uri()) 
    qml_file = app_root_path / 'main.qml'
    engine.load(qml_file.as_uri())

    if not engine.rootObjects():
        sys.exit(-1)

    sys.exit(app.exec())

Now you can access your files in QML with a relative path like this:

 source: "file:images/icon.svg"

Upvotes: 0

KYL3R
KYL3R

Reputation: 4073

Old questions, but got here from google. For me, it works simply with a relative path like this:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.3

[...]    

Image {
    id: image
    source: "icons/brightness.svg" // simple relative path
    width: 22
    height: 22
    sourceSize.width: 22 // svg render resolution
    sourceSize.height: 22
    fillMode: Image.PreserveAspectFit // just in case to avoid stretching
}

no .qrc needed.

Upvotes: -2

Mitch
Mitch

Reputation: 24396

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.

Upvotes: 34

newmind
newmind

Reputation: 76

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

Upvotes: 5

Related Questions