vue-component - 如何在 Vuetify 中为 AppBar 添加 Logo ？

Question

我有一个 v-app-bar控制，我正在尝试向其添加 Logo /图像。

Veutify 中是否有向 AppBar 添加 Logo 的标准方法？

Answer 1

您可以添加 v-img 像这样的组件:

<v-app-bar color="light-blue lighten-3" app>

  <v-img
 class="mx-2"
 src="https://i.imgur.com/qgGY4tB.png"
 max-height="40"
 max-width="40"
 contain
 ></v-img>

  <v-toolbar-title class="ml-2">
    Page title
  </v-toolbar-title>

</v-app-bar>

设置 max-height 很重要和 max-width ，否则图像将垂直溢出导航并水平推过标题。并设置 contain保持纵横比

Demo in CodePen

Note: If you're using Nuxt/Webpack, etc, you might need to build the image path with something like this: :src="require('~/assets/logo.png')"