有没有办法在 qml 中使用图像占位符？答案

【问题标题】：Is there any way to use image placeholder in qml?有没有办法在 qml 中使用图像占位符？
【发布时间】：2021-05-21 00:47:08
【问题描述】：

目前我正在从服务器获取图像，因此有时加载需要一些时间，或者有时如果服务器上没有图像，则图像位置显示为空白。因此，只要未加载服务器图像，我就需要显示某些内容/默认图像。我试图这样做，如果服务器上没有我正在加载图像的图像，那么我会尝试从我的本地显示图像。如果图像没有从服务器正确加载，有什么方法可以显示默认图像。

  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"
           }
          }                                                         
  }

【问题讨论】：

标签： qt qml

【解决方案1】：

一种可能的解决方案是在主图像上放置一个图像，并在加载时隐藏初始图像：

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 
    }
}

【讨论】：