Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

list of images with different sources [Repeater]



  • Hello, i'm creating a small app using qml (+ pyside2) but i'm facing some small qml problems.

    i have an array of pictures urls, and i want to create a list of images that differ in sources (url that i get from the array) but i dont know how to make that possible ...

    i'm trying different approach to see what happen, but i'm getting an error saying that the assigned id is not defined (ReferenceError: pic is not defined) when the id is inside reapeter

    here is my code:

    Grid {
            columns: 1
            spacing: 2
            Rectangle { color: "red"; width: 200; height: 200;
                Column {
                    Repeater {
                        Image {
                            id: pic
                            source: ""
                        }
                    }
                }
            }
            
            Button {
                text: "Load"
                onClicked: {
                    var img = ['https://pbs.twimg.com/profile_images/875749462957670400/T0lwiBK8_400x400.jpg', 
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNWZZEtSli3K3SYZN-Mhsl0WPo_1o6qYQ5ag&usqp=CAU'];
                    
                    for (var i = 0; i < img.length; i++) {
                        pic.source = img[i]
                    }
                }
            }
        }
    

    Thank you



  • after perseverence, I ended up finding a good approach.
    but I stay tuned if there is better: delegate-prop

    Grid {
            columns: 1
            spacing: 2
            Rectangle { color: "red"; width: 200; height: 200;
                Column {
                    Repeater {
                        id: rep
                        Image {
                            source: modelData
                        }
                    }
                }
            }
            
            Button {
                text: "Load"
                onClicked: {
                    var img = ['https://pbs.twimg.com/profile_images/875749462957670400/T0lwiBK8_400x400.jpg', 
                        'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQNWZZEtSli3K3SYZN-Mhsl0WPo_1o6qYQ5ag&usqp=CAU'];
                    rep.model = img
                }
            }
        }
    
    

Log in to reply