How to add and use a resource in QML?

Question

I want to use a QtQuick Image object in a simple Qt project, and include the image in the project. I have added the image to the resource file. I have used debugging to be sure that the resource exists and is compiled into the application as "Resources/myfile.png"

However if I declare a QtQuick image object and set the source to "Resource/myfile.png" the image is not found. Instead I get a message:

QML Image: Cannot open: file:///C:/Users/me/Documents/QtCreator/build-myapp-Desktop_Qt_5_1_1_MinGW_32bit-Debug/qml/myapp/Resources/dial_bg.png

The same occurs if I try to use the C++ approach to accessing the file

source: ":/Resources/dial_bg.png"

This gets me an error at compile time.

myfile.png has not been copied to that location. myfile.png doesn't appear in the project files, although it has been added to the resources file.

I'll be happy with a solution that either gets the image copied to the place where the Image wants to pick it up, or a way for Image to access the 'compiled in' version.

score 8 · Answer 1 · answered Jun 22 '20 at 21:15

8

If you're using Qt Creator you can right click on the resource and Copy Path which in my case gives me:

qrc:/Oscar.PNG

You don't need directly reference the resources directory as suggested by selected answer.

Example:

answered Jun 22 '20 at 21:15

BugHunterUK

8,346
16
65
121

score 6 · Answer 2 · answered Oct 29 '13 at 18:34

6

The way to access such resources in QML is as:

source: "qrc:///Resources/dial_bg.png"

answered Oct 29 '13 at 18:34

DJClayworth

26,349
9
53
79

1

This gets the image from the resource area of the application executable. You will also have to add it to your qrc file so it will be built into the executable. – Jay Mar 21 '14 at 22:55

score 2 · Answer 3 · answered Jan 13 '17 at 10:05

qml.qrc file

<!DOCTYPE RCC><RCC version="1.0">
<qresource prefix="/">
    <file alias="main.qml">qml/main.qml</file>
</qresource>
<qresource prefix="/pics/">
    <file alias="bottom_arrow.png">pics/bottom_arrow.png</file>
</qresource>
</RCC>

In main.cpp file to load a qml file:

...
QString qml = QStringLiteral("qrc:///main.qml");
engine.load(QUrl(qml));
...

In main.qml file to load an image:

...
Image {
  source: "pics/ef-logo.png"
}
..

In QT, it somehow AUTORCC qrc file to code. But if you are using Cmake and visual studio. then in Cmake you need to include this :

set(CMAKE_AUTOMOC ON)                   #must have for QML to work
set(CMAKE_AUTORCC ON)                   #for compiling qrc file to rcc
set(AUTORCC_OPTIONS "src/qml.qrc")

I hope this will help. It may not be the best way, but still

How to add and use a resource in QML?

3 Answers3

Linked