Using QML to capture images

[Abdulmueez]

While trying to capture images with my qml, I received the error QML Image: Protocol "c" is unknown
After reading the documentation, I read that the path emitted by the signal imageSaved is a local path and not a url. I added the method encodeURIComponent(path) and this solves that particular error but returns a new one QML Image: Cannot open: file:///C:/Users/emiol/OneDrive/Documents/Multimedia/C%3A/Users/emiol/OneDrive/Pictures/IMG_00000003.jpg
I noticed that the path string is formatted wrongly, looks like the joining of two path strings.
Can someone help me out here. Attached below is my code.
P.S: The images are stored in my system not just accessible from the program

import QtQuick 2.5
import QtMultimedia 5.6
import "./ch11-multimedia/src/camera"
Rectangle {
    id: root

    width: 1024
    height: 600

    color: "black"

    // M1>>
    VideoOutput {
        anchors.fill: parent
        source: camera
    }

    Camera {
        id: camera
    }
    // <<M1

    // M2>>
    ListModel {
        id: imagePaths
    }

    ListView {
        id: listView

        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 10

        height: 100

        orientation: ListView.Horizontal
        spacing: 10

        model: imagePaths

        delegate: Image {
            height: 100
            source: encodeURIComponent(path)
            fillMode: Image.PreserveAspectFit
        }

        Rectangle {
            anchors.fill: parent
            anchors.topMargin: -10

            color: "black"
            opacity: 0.5
        }
    }
    // <<M2

    Image {
        id: image
        anchors.fill: parent
    }

    // M3>>
    Connections {
        target: camera.imageCapture

        onImageSaved: {
            imagePaths.append({"path":path})
            listView.positionViewAtEnd();
        }
    }
    // <<M3

    Column {
        id: buttons

        anchors.top: parent.top
        anchors.right: parent.right
        anchors.margins: 10

        spacing: 10

        // M4>>
        Button {
            id: shotButton

            text: "Take Photo"
            onClicked: {
                camera.imageCapture.capture();
            }
        }
        // <<M4

        Button {
            id: playButton

            text: "Play Sequence"
            onClicked: {
                startPlayback();
            }
        }

        Button {
            id: clearButton

            text: "Clear Sequence"
            onClicked: {
                imagePaths.clear();
            }
        }
    }

    // M5>>
    property int _imageIndex: -1

    function startPlayback()
    {
        root.state = "playing";
        setImageIndex(0);
        playTimer.start();
    }

    function setImageIndex(i)
    {
        _imageIndex = i;

        if (_imageIndex >= 0 && _imageIndex < imagePaths.count)
            image.source = imagePaths.get(_imageIndex).path;
        else
            image.source = "";
    }

    Timer {
        id: playTimer

        interval: 200
        repeat: false

        onTriggered: {
            if (_imageIndex + 1 < imagePaths.count)
            {
                setImageIndex(_imageIndex + 1);
                playTimer.start();
            }
            else
            {
                setImageIndex(-1);
                root.state = "";
            }
        }
    }
    // <<M5

    states: [
        State {
            name: "playing"
            PropertyChanges {
                target: buttons
                opacity: 0
            }
            PropertyChanges {
                target: listView
                opacity: 0
            }
        }
    ]

    transitions: [
        Transition { PropertyAnimation { properties: "opacity"; duration: 200; } }
    ]
}