web-dev-qa-db-fra.com

Comment ajouter un logo à AppBar dans Vuetify?

J'ai un v-app-bar control, et j'essaie d'y ajouter un logo/une image.

Existe-t-il une approche standard dans Veutify pour ajouter un logo à l'AppBar?

vue-componentvuetify.js
8
Erick

Utilisez v-avatar Avec une propriété tile définie sur true, comme ceci:

<v-avatar :tile="true">
  <img :src="require('@/assets/logo.png')" alt="logo">
</v-avatar>

L'exemple complet de v-app-bar:

<v-app-bar app light>
  <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
  <v-avatar :tile="true">
    <img :src="require('@/assets/logo.png')" alt="logo">
  </v-avatar>
  <v-toolbar-title>Header text</v-toolbar-title>
</v-app-bar>
1
Andriy Kuba

Vous pouvez simplement utiliser le <img> balise du HTML natif pour définir votre logo.

Vous pouvez ensuite les redimensionner avec la propriété width ou height.

0
Nicolas Descamps