c++ - Loading QML with images in ui file using QQuickWidget

Question

I created a QML Gauge in a separate project of QT which uses a bunch of .svg images in it. The Gauge works fine when I run the project and can be controlled from the main.CPP file. Now I am trying to import this into another project which has a .ui file. I tried by making a QQuckWidget in .ui file and then providing the .qml file as a resource but instead of importing it simply shows the Gauge in a new window, and without the .svg images. How to fix this issue? This is main.CPP file which I was using to control QML Gauge

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>
#include <QQuickItem>
#include <QQmlEngine>
#include <QQmlComponent>
#include <QString>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
    QQmlApplicationEngine engine;
     QQmlComponent component(&engine, QUrl(QStringLiteral("qrc:/main.qml")));
     QObject *object = component.create();
     object->setProperty("value", 4500);
     return app.exec();
}

This is my main.qml file

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0

ApplicationWindow {
    id: window
    visible: true
     property alias value: whot.value



    CircularGauge {
        id: whot
        value: 400
        maximumValue: 5000
        minimumValue: 400
        anchors {
            fill: parent
            margins: window.height * 0.2
        }

        style: CircularGaugeStyle {
            labelStepSize: 400
            labelInset: outerRadius / 2.2
            tickmarkInset: outerRadius / 4.2
            minorTickmarkInset: outerRadius / 4.2
            minimumValueAngle: -144
            maximumValueAngle: 144

            background: Rectangle {
                implicitHeight: whot.height
                implicitWidth: whot.width
                color: "red"
                anchors.centerIn: parent
                radius: 360

                Image {
                    anchors.fill: parent
                    source: "qrc:/img/background.svg"
                    asynchronous: true
                    sourceSize {
                        width: width
                    }
                }

                Canvas {
                    property int value: whot.value

                    anchors.fill: parent
                    onValueChanged: requestPaint()

                    function degreesToRadians(degrees) {
                      return degrees * (Math.PI / 180);
                    }

                    onPaint: {
                        var ctx = getContext("2d");
                        ctx.reset();
                        ctx.beginPath();
                        ctx.strokeStyle = rgb(77,77,77)
                        ctx.lineWidth = outerRadius
                        ctx.arc(outerRadius,
                              outerRadius,
                              outerRadius - ctx.lineWidth / 2,
                              degreesToRadians(valueToAngle(whot.value) - 90),
                              degreesToRadians(valueToAngle(whot.maximumValue + 1) - 90));
                        ctx.stroke();
                    }
                }
            }

            needle: Item {
                y: -outerRadius * 0.78
                height: outerRadius * 0.27
                Image {
                    id: needle
                    source: "qrc:/img/needle.svg"
                    height: parent.height
                    width: height * 0.1
                    asynchronous: true
                    antialiasing: true
                }

                Glow {
                  anchors.fill: needle
                  radius: 5
                  samples: 10
                  color: "red"
                  source: needle
              }
            }

            foreground: Item {
                Text {
                    id: speedLabel
                    anchors.centerIn: parent
                    text: whot.value.toFixed(0)
                    font.pixelSize: outerRadius * 0.3
                    color: "white"
                    antialiasing: true
                }
            }

            tickmarkLabel:  Text {
                font.pixelSize: Math.max(6, outerRadius * 0.05)
                text: styleData.value
                color: styleData.value <= whot.value ? "white" : "white"
                antialiasing: true
            }

            tickmark: Image {
                source: "qrc:/img/tickmark.svg"
                width: outerRadius * 0.018
                height: outerRadius * 0.15
                antialiasing: true
                asynchronous: true
            }

            minorTickmark: Rectangle {
                implicitWidth: outerRadius * 0.01
                implicitHeight: outerRadius * 0.03

                antialiasing: true
                smooth: true
                color: styleData.value <= whot.value ? "white" : "darkGray"
           }
            Component.onCompleted: forceActiveFocus()


            }
        }
    Behavior on value { NumberAnimation { duration: 1000 }}

    Keys.onSpacePressed: accelerating = true
    Keys.onReleased: {
        if (event.key === Qt.Key_Space) {
            accelerating = false;
            event.accepted = true;
        }
       }
      }

Answer 1

等待大神答复