Image in top dropdown menu ?

[ondrej1003]

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

[krsyoung]

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].

[techpeace]

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>