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.

Parclose

Answer 1

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:

Anaemia

Answer 2

The way to access such resources in QML is as:

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

Parclose

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. – Blacksnake

Answer 3

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

Shine

Answer 4

I'm using PySide6 and lots of documents for C++ is not match for Python I did lots of search with no results but eventually I found out that I should add qrc: prefix to them!

In my case while I defined them like

<qresource prefix="icon">
    <file alias="fa-regular fa-address-book">assets/imgs/svgs/regular/address-book.svg</file>
</qresource>

And when I used this address :/fa-regular fa-address-book or :fa-regular fa-address-book it dosn't works but when I added qrc in front of it in QML file it works so it should be qrc:/fa-regular fa-address-book.

Bireme