CODEWITHSUNDEEP
imageqtqmlqtquick2
DJClayworth
DJClayworth

Reputation: 26846

How to add and use a resource in QML?

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.

Upvotes: 13

Views: 25333

Answers (4)

Bambier
Bambier

Reputation: 845

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.

Upvotes: 0

Raimondas Klemka
Raimondas Klemka

Reputation: 33

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

Upvotes: 2

BugHunterUK
BugHunterUK

Reputation: 8928

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:

Example of copying resource path

Upvotes: 8

DJClayworth
DJClayworth

Reputation: 26846

The way to access such resources in QML is as:

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

Upvotes: 5

Related Questions