How to change img of Rect outside of the Rect?

qazaq408

//ChangeImg.qml
Rectangle {
    width : 100;
    height : 100
    Image{
        id:imgx
        source : "A1.png"
        anchors.fill : parent
    }
}

//mian.qml
Column{
    ChangeImg{
        id:a1
        width : 100 
        height : 100
    }
    ChangeImg{
        id:a2
        width : 100 
        height : 100
    }
    Component.onCompleted : {
        //a2.Image.source = "A2.png";   #1
        //ChangeImg.imgx.source = "A2.png";   #2
        //a1.imgx.source = "know.png";   #3
    }
}

I want to change IMG of Rect in Column because of some special reason,but it doesn't work. When i use cmd

qml main.qml

#1 Nothing happend,the img of Rect (whether a1 or a2) is "A1.png"

#2 "file:///D:/QML/TestImg/main.qml:16: TypeError: Value is undefined and could not be converted to an object"

#3 The same as #2

so, how to change IMG of Rect outside of the Rect?

johngod

Hi
You have to create a alias to be able to access the image from outside

Rectangle {
    width : 100;
    height : 100
    property alias imgx: imgx
    Image{
        id:imgx
        source : "A1.png"
        anchors.fill : parent
    }
}

qazaq408

@johngod
Thank You Very Much

qazaq408

@johngod
hi，i met another problem.......

In fact,i need change IMG by JS function,yestaday,i try to use "alias" and make sure it can change IMG outside Rect,but now ,i write a JS funtion look like

function changeImg(){
    //do something.....
    a1.imgx = "A2.png";
}

And then ,when execute main.qml,complier tell me
" file:///E:/QML/ChangeImg.js:23: TypeError: Cannot assign to read-only property "imgx"
"

Could you help me again to solve this problem?