QML Load Image asynchronous from URL

In this post I am showing how QML ListView can populate with image loaded from url asynchronously. First we create ListView and corresponding delegate for ListView. where delegate contain the component Image and there we have to set the property asynchronous: true

The demo for this code can be found here



Here is the complete code.

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 900
    height: 900
    id: list_view_bg
    title: qsTr("QML ImageView")

    Component {
        id: appDelegate

        Item {
            width: list_view_bg.width
            height: 50
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    table_list_view.currentIndex = index
                }
            }

            Row {
                id: table_row
                property int col_width: list_view_bg.width / 4
                property color bg_color: "#99000000"

                //spacing: 1
                Rectangle {
                    width: table_row.col_width
                    height: 50
                    color: table_row.bg_color
                    border.width: 1
                    border.color: "white"
                    Text {
                        anchors.centerIn: parent
                        text: col1_txt
                        font.bold: true
                        font.pointSize: 9
                        color: "white"
                    }
                }

                Rectangle {
                    width: table_row.col_width
                    height: 50
                    color: table_row.bg_color
                    border.width: 1
                    border.color: "white"

                    Text {
                        anchors.centerIn: parent
                        text: col2_txt
                        font.bold: true
                        font.pointSize: 9
                        color: "white"
                    }
                }

                Rectangle {
                    width: table_row.col_width
                    height: 50
                    color: table_row.bg_color
                    border.width: 1
                    border.color: "white"

                    Text {
                        anchors.centerIn: parent
                        text: col3_txt
                        font.bold: true
                        font.pointSize: 9
                        color: "white"
                    }
                }

                Rectangle {
                    id: img_cln
                    width: table_row.col_width
                    height: 50
                    color: table_row.bg_color
                    border.width: 1
                    border.color: "white"

                    Image {
                        id: myIcon
                        width: table_row.col_width
                        height: 45
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        source: icon
                        fillMode: Image.PreserveAspectFit
                        cache: true
                        asynchronous: true
                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                img_enlarged.source = icon
                                table_list_view.currentIndex = index
                            }
                        }
                    }
                }
            }
        }
    }

    ListView {
        id: table_list_view
        width: parent.width
        height: parent.height * .5
        cacheBuffer: 50 * 500
        clip: true
        focus: true
        model: appModel
        highlight: Rectangle {
            color: "#5500FFFF"
            radius: 3
        }
        delegate: appDelegate
        flickableDirection: Flickable.VerticalFlick

        flickableChildren: MouseArea {
            anchors.fill: parent
            onClicked: {

            }
        }
    }

    Rectangle {
        width: parent.width
        height: parent.height * .5
        anchors.top: table_list_view.bottom
        anchors.topMargin: 5
        border.width: 1
        border.color: "red"
        Image {
            id: img_enlarged
            width: parent.width
            height: parent.height - 10
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            fillMode: Image.PreserveAspectFit
            cache: true
            asynchronous: true
        }
    }




    ListModel {
        id: appModel
        Component.onCompleted: {
             var imgURLs = ['https://images.pexels.com/photos/2095924/pexels-photo-2095924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
                            'https://images.pexels.com/photos/929778/pexels-photo-929778.jpeg?cs=srgb&dl=bloom-blooming-blossom-929778.jpg&fm=jpg',
                            'https://images.pexels.com/photos/1366630/pexels-photo-1366630.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
                            'https://images.pexels.com/photos/87469/rose-blossom-bloom-red-rose-87469.jpeg?cs=srgb&dl=bloom-blossom-flora-87469.jpg&fm=jpg',
                            'https://images.pexels.com/photos/1115090/pexels-photo-1115090.jpeg?cs=srgb&dl=beautiful-flowers-bloom-blossom-1115090.jpg&fm=jpg'];
            appModel.append({ col1_txt: " 1",col2_txt:"Image1",col3_txt:"Details1",icon: imgURLs[0] })
            appModel.append({ col1_txt: " 2",col2_txt:"Image2",col3_txt:"Details2",icon: imgURLs[1] })
            appModel.append({ col1_txt: " 3",col2_txt:"Image3",col3_txt:"Details3",icon: imgURLs[2] })
            appModel.append({ col1_txt: " 4",col2_txt:"Image4",col3_txt:"Details4",icon: imgURLs[3] })
            appModel.append({ col1_txt: " 5",col2_txt:"Image5",col3_txt:"Details5",icon: imgURLs[4] })
            appModel.append({ col1_txt: " 1",col2_txt:"Image1",col3_txt:"Details1",icon: imgURLs[0] })
            appModel.append({ col1_txt: " 2",col2_txt:"Image2",col3_txt:"Details2",icon: imgURLs[1] })
            appModel.append({ col1_txt: " 3",col2_txt:"Image3",col3_txt:"Details3",icon: imgURLs[2] })
            appModel.append({ col1_txt: " 4",col2_txt:"Image4",col3_txt:"Details4",icon: imgURLs[3] })
            appModel.append({ col1_txt: " 5",col2_txt:"Image5",col3_txt:"Details5",icon: imgURLs[4] })
            appModel.append({ col1_txt: " 1",col2_txt:"Image1",col3_txt:"Details1",icon: imgURLs[0] })
            appModel.append({ col1_txt: " 2",col2_txt:"Image2",col3_txt:"Details2",icon: imgURLs[1] })
            appModel.append({ col1_txt: " 3",col2_txt:"Image3",col3_txt:"Details3",icon: imgURLs[2] })
            appModel.append({ col1_txt: " 4",col2_txt:"Image4",col3_txt:"Details4",icon: imgURLs[3] })
            appModel.append({ col1_txt: " 5",col2_txt:"Image5",col3_txt:"Details5",icon: imgURLs[4] })

    }
    }


}