qrc:/main.qml:9 "gui/delegates/UePeopleItemDelegate.qml": no such directory error

[MarkoSan]

I have a Qt Creator project (Qt/QML) that resided in /home/markofr/projects/ueBlagajnaClient. Now, inside this project I have following structure:. Now, if I try to import UePeopleItemDelegate.qml int main.qml as in following code:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import QtMultimedia 5.0
import QtQuick.Layouts 1.0
import QtTest 1.1

import "gui/delegates/UePeopleItemDelegate.qml" as UePersonItemDelegate

ApplicationWindow
{
    id: ueWindowMain

    title: qsTr("TestApp")

    width: 512//Screen.desktopAvailableWidth
    height: 512//Screen.desktopAvailableWidth

    visible: true

    opacity: 1.0

    contentOrientation: Qt.LandscapeOrientation

    color: "black"

    ListView {
        id: uePeopleListView
        snapMode: ListView.SnapToItem
        highlightRangeMode: ListView.ApplyRange
        anchors.right: parent.right
        anchors.rightMargin: 0
        anchors.bottom: parent.top
        anchors.bottomMargin: -128
        anchors.left: parent.left
        anchors.leftMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        orientation: ListView.Horizontal
        flickableDirection: Flickable.HorizontalFlick
        antialiasing: true
        delegate: UePersonItemDelegate
        model: ListModel {
            ListElement {
                name: "Grey"
                colorCode: "grey"
            }

            ListElement {
                name: "Red"
                colorCode: "red"
            }

            ListElement {
                name: "Blue"
                colorCode: "blue"
            }

            ListElement {
                name: "Green"
                colorCode: "green"
            }
        }
    }
}

Now, when I run this app, I get following error (in runtime, the code compiles and builds without problems):
qrc:/main.qml:9 "gui/delegates/UePeopleItemDelegate.qml": no such directory
How do I correctly import custom qml?

[p3c0]

@MarkoSan Following are the 2 ways to do it correctly,

• If loading main.qml from resource (i.e qrc)
  for eg. engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
  You will need to add the complete path so that the main.qml file in qrc is able to find it. For eg.

  import "file:///home/someusername/gui/delegates" //import using complete path
  UePeopleItemDelegate {  //using the loaded Component
  }
  

• If loading main.qml directly i.e from some local path
  for eg. engine.load(QUrl(QStringLiteral("main.qml"))). Note no qrc
  Here you can use the relative path in main.qml

  import "./gui/delegates" //import using relative path
  UePeopleItemDelegate {  //using the loaded Component
  }
  

  Assuming the directory gui is present in same location that of main.qml as we have used "."