“Solved”How to display pictures (jpg, png) in thumbnail view using QML?

  • I have list of pictures and want to use GridView (XmlListModel or ListModel) to display pictures (jpg, png) in thumbnail view in QML. But I have no clue.

    Could anyone help me?

  • Create a list model, a custom delegate, and a GridView.

    Your delegate component should simply be an Image or something similarly simple to start with that displays the source url at the desired size.

    Your list model should contain ListElement items that contain the source URL of your images.

    In your GridView set the "model" property to your ListModel and the "delegate" property to your delegate component.

    Something along these lines (not tested):

    ListModel {
    id: imageModel
    ListElement {
    name: "Image 01"
    imageUrl: "http://myserver/path/to/image01"
    ListElement {
    name: "Image 02"
    imageUrl: "http://myserver/path/to/image02"
    ListElement {
    name: "Image 03"
    imageUrl: "http://myserver/path/to/image03"
    ListElement {
    name: "Image 04"
    imageUrl: "http://myserver/path/to/image04"

    Component {
    id: imageDelegate
    Column {
    width: 200
    height: 200
    Image { source: imageUrl }
    Text { text: name }

    GridView {
    model: imageModel
    delegate: imageDelegate
    anchors.fill: parent

  • As ZapB reply, you can also use scaleMode, when use Image element to scale the original image to fit the item(thumbnail) size.

  • Ah yes, sorry I forgot to mention the scaleMode property. Thanks for reminding.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.