Image in top dropdown menu ?



  • Hi.
    I need dropdown menu with png image instead of icon. Is it possible ?
    Very thank you for your help. 🙂



  • Not perfect, but I’ve done something similar but with a q-chip component. I’m actually using it the q-toolbar for my layout:

    <q-chip
              v-if="isAuthenticated"
              avatar="https://api.adorable.io/avatars/285/abott@adorable.png"
              color="primary"
              @click="toggleSettingsPopover()">
              <q-popover v-model="displaySettingsMenu">
                <q-list item-separator link>
                  ....
                </q-list>
              </q-popover>
            </q-chip>
    

    with:

    methods: {
        toggleSettingsPopover: function () {
          this.displaySettingsMenu = !this.displaySettingsMenu
        }
    }
    

    Ideally there would be an option to add an avatar / image to a button or at least move the avatar on the chip to the RHS (like icon-right) – then I could do {{user.name}} [avatar].



  • Based on @krsyoung’s code, I achieved the same thing with a q-btn:

    <q-btn
      glossy
      v-if="$auth.isAuthenticated()"
      label="Profile menu"
    >
      <img class="profile" width="30" height="30" :src="$auth.user.picture" />
    
      <q-popover
        anchor="bottom right"
        self="top right">
        <q-list link>
          <q-list-header>{{ $auth.user.name }}</q-list-header>
          <q-item @click.native="logOut">
            <q-item-side icon="lock_open" />
            <q-item-main>
              <q-item-tile
                label>
                Log Out
              </q-item-tile>
            </q-item-main>
          </q-item>
        </q-list>
      </q-popover>
    </q-btn>