QML cannot open an image more than once

Question

In one of my QML pages, there are 1 back button and a listview containing an image and a text on each row. I use a test image for both back button and listview row item. The back button can show the image but the listview complains about "QML Image: Cannot open: qrc:/../../../Users/Jerry/Desktop/LA.png".

Both the image and all QML files are under Resources. Here is the code.

import QtQuick 2.0
import QtQuick.Controls 1.2

Rectangle {
anchors.fill: parent

Item {
    id: advancedBackground
    anchors.fill: parent

    Button {
        id: backButton
        width: 25
        height: 25
        anchors.top: parent.top
        anchors.topMargin: 25
        anchors.left: parent.left
        anchors.leftMargin: 25
        opacity: backMouseArea.containsMouse ? 0.9 : 0.1
        MouseArea {
            id: backMouseArea
            anchors.fill: parent
            hoverEnabled: true
            onClicked: {
                leftArrow.visible = true;
                rightArrow.visible = false;
                stackView.pop();
            }
        }
        Image {
            anchors.fill: parent
            fillMode: Image.PreserveAspectFit
            // image works fine here
            source: "qrc:/../../../Users/Jerry/Desktop/LA.png"
        }
    }

    ListView{
        id: listView
        anchors.rightMargin: 40
        anchors.leftMargin: 40
        anchors.bottomMargin: 30
        anchors.topMargin: 90
        anchors.fill: parent

        delegate: Item {
            x: 5
            width: parent.height
            height: 40

            Image {
                height: parent.height; width: parent.height
                anchors.left: parent.left
                fillMode: Image.PreserveAspectFit
                source: imageSource
            }

            Text {
                text: name
                height: parent.height
                width: parent.width
                anchors.left: parent.left
                anchors.leftMargin: 50
                anchors.centerIn: parent
                font.bold: true
                anchors.horizontalCenter: parent.horizontalCenter
            }
        }
        model: ListModel {
            ListElement {
                name: "test1"
                // image doesn't work here
                imageSource: "qrc:/../../../Users/Jerry/Desktop/LA.png"
            }

            ListElement {
                name: "test2"
                // image doesn't work here
                imageSource: "qrc:/../../../Users/Jerry/Desktop/LA.png"
            }
        }
    }
}

}

Under the Resources, it includes AdvancedPages.qml and ../../../Users/Jerry/Desktop/LA.png

Answer 1

I think you should get rid of relative path to your image. The path should be like qrc:/images/LA.png.