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

Navigation is not part of the QML standard, are you using a library like Felgo? — eyllanesc, Aug 19 '20 at 01:48
have you tried: `icon.source: "file:///C:/Users/Nourin/Pictures/cnt.png"`? — eyllanesc, Aug 19 '20 at 02:03
I got error "file:WebEditor/qml/WebScriptMain.qml:8: Invalid grouped property access" — FATHIMA NOURIN T R, Aug 19 '20 at 02:28
Now I have uodated url source from http. still error is same. — FATHIMA NOURIN T R, Aug 19 '20 at 02:30
It looks like you have to use `IconType` constant, or use the `iconComponent` property to place you commented `Image`, like: `iconComponent: Image { source: "http..." }` — Amfasis, Aug 19 '20 at 08:31

score 1 · Answer 1 · answered Jun 14 '21 at 09:51

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

How to set custom Image on NavigationItem of Felgo/QML

1 Answers1