How to set custom Image on NavigationItem of Felgo/QML

Question

I am using qt, and my navigation item need to set custom image from the device, How to set Image on NavigationItem?

  App {  
      Navigation {
        NavigationItem {
          title: "Main"
           //I need set Image on this item, kindly help me. I know there is icon, but I dont know how to set custom image.
          //Image{ "  icon.source: "https://www.howtogeek.com/wp-content/uploads/2018/06/shutterstock_1006988770.png""
          //      anchors.left:parent.left       
          }
        }
    }

Answer 1

If I understood you correctly -- you want to set navigation item image to be something more than one of the IconType constants. To make it possible you need to declare your own component and set as iconComponent. Also, keep in mind that you are not limited to use only images there -- you can use any kind of UI element (for reference, see example in official documentation).

Here is an example implementation you can try yourself:

import QtQuick 2.15
import Felgo 3.0

App {
  // Here CustomNavigationImage is inline declaration of a component.
  // If your Qt is lower then 5.15, you can declare this component in a separate file.
  component CustomNavigationImage: AppImage {
    anchors.fill: parent
    fillMode: Image.PreserveAspectFit
  }

  Navigation {
    navigationMode: navigationModeTabsAndDrawer

    NavigationItem {
      title: "Custom Page"
      iconComponent: CustomNavigationImage {
        defaultSource: "https://www.howtogeek.com/wp-content/uploads/2018/06/shutterstock_1006988770.png"
      }
      NavigationStack {
        Page { title: "Custom page" }
      }
    }

    NavigationItem {
      title: "StackOveflow image"
      iconComponent: CustomNavigationImage {
        defaultSource: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png"
      }
      NavigationStack {
        Page { title: "StackOveflow image" }
      }
    }
  }
}