Com incorporar imatges a QML

Regla d'or

Sempre usa qrc:/ per accedir a imatges encastades a l'executable.

Exemple complet

Estructura del projecte:

projecte/
├── CMakeLists.txt
├── main.cpp
├── Main.qml
└── jb_logo.png

CMakeLists.txt

cmake_minimum_required(VERSION 3.16)
project(minRecursos VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD_REQUIRED ON)
find_package(Qt6 REQUIRED COMPONENTS Quick)
qt_standard_project_setup(REQUIRES 6.8)

qt_add_executable(appminRecursos main.cpp)

qt_add_qml_module(appminRecursos
    URI exempleRecursos00
    QML_FILES Main.qml
)

# Afegir els recursos (imatges, fonts, etc.)
qt_add_resources(appminRecursos "resources"
    PREFIX "/"
    FILES
        jb_logo.png
)

target_link_libraries(appminRecursos PRIVATE Qt6::Quick)

Main.qml

import QtQuick

Window {
    visible: true
    width: 400
    height: 300
    title: "Exemple Recursos"

    Image {
        source: "qrc:/jb_logo.png"  // ← Sempre amb qrc:/
        anchors.centerIn: parent
        fillMode: Image.PreserveAspectFit
    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    QObject::connect(
        &engine,
        &QQmlApplicationEngine::objectCreationFailed,
        &app,
        []() { QCoreApplication::exit(-1); },
        Qt::QueuedConnection);
    engine.loadFromModule("exempleRecursos00", "Main");

    return app.exec();
}

Errors comuns

❌ Error: source: "jb_logo.png" (sense qrc:/)

Image { source: "jb_logo.png" }  // ❌ NO funciona en executable distribuït

Problema: Busca el fitxer al sistema de fitxers, no dins de l'executable.

Solució:

Image { source: "qrc:/jb_logo.png" }  // ✅ Sempre funciona

❌ Error: "Cannot open: qrc:/jb_logo.png"

Causes:

  1. La imatge no està al CMakeLists.txt dins de qt_add_resources
  2. El nom del fitxer no coincideix (majúscules/minúscules)
  3. No has fet Clean All + Rebuild

Solució: Verifica que la imatge estigui declarada al CMakeLists.txt i fes rebuild.

Organitzar múltiples imatges

Amb carpetes

Estructura:

projecte/
├── CMakeLists.txt
├── Main.qml
└── images/
    ├── logo.png
    └── background.jpg

CMakeLists.txt:

qt_add_resources(appminRecursos "imatges"
    PREFIX "/img"
    BASE "images"
    FILES
        images/logo.png
        images/background.jpg
)

Main.qml:

Image { source: "qrc:/img/logo.png" }
Image { source: "qrc:/img/background.jpg" }

Com verificar que funciona

Prova fora del directori del projecte

# Compila
cd build/
cmake --build .

# Copia l'executable a un altre lloc
cp appminRecursos /tmp/

# Executa des d'allà
cd /tmp/
./appminRecursos

# Si la imatge es veu → ✅ Tot correcte!

Debug a la consola

Image {
    source: "qrc:/jb_logo.png"
    
    onStatusChanged: {
        if (status === Image.Ready) {
            console.log("✅ Imatge carregada")
        } else if (status === Image.Error) {
            console.error("❌ Error:", source)
        }
    }
}

Resum ràpid

  1. Declara la imatge al CMakeLists.txt dins de qt_add_resources
  2. Usa qrc:/ sempre al codi QML
  3. Fes Clean + Rebuild després de modificar recursos
  4. Prova l'executable fora del directori del projecte per verificar

PATH al QML = PREFIX + nom del fitxer