Is there any way to use image placeholder in qml?

user_13846567 0
Viewed 196

Currently I am getting images from server , so sometimes it takes some time to load or sometimes if there is no image on the server ,the image place is showing blank. So i need to show something/default image as long as the server image is not loaded. I tried to do this, if there is no image on the server from where i'm loading image then I try to show a image from my local. Is there any way to show a default image if the image is not loaded properly from server.

  Image {
      id:img
      height: 100
      width: 300                                                                                                   
    Component.onCompleted: {                                                          
          if(there is no image on server){
                                                
           img.source="assets/images/someimage.png"
           }
           else{
          img.source="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
           }
          }                                                         
  }
qml qt
1 Answers

A possible solution is to place an Image on top of the main Image and when it is loaded hide the initial Image:

Image {
    id: img
    width: 300 
    height: 100
    source: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW58ZW58MHx8MHw%3D&ixlib=rb-1.2.1&w=1000&q=80"
    Image{
        id: default_img
        anchors.fill: parent
        source: "assets/images/someimage.png"
        visible: img.status != Image.Ready 
    }
}
user_66225870
Related