web-dev-qa-db-ja.com

VuetifyでロゴをAppBarに追加する方法

v-app-barコントロール。ロゴや画像を追加しようとしています。

AppBarにロゴを追加するためのVeutifyの標準的なアプローチはありますか？

vue-componentvuetify.js
8
Erick

使用する v-avatarとtileプロパティをtrueに設定すると、次のようになります。

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

完全な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

ヨンはジャスト<img>ロゴを設定するためのネイティブHTMLからのbalise。

次に、widthまたはheightプロパティを使用してサイズを変更できます。

0
Nicolas Descamps