如何在vuetify中将徽标设置为工具栏而不是标题？

Question

我正在设置工具栏标题，但我也想在工具栏中设置徽标，而Vuetify中没有单独的组件。有什么解决办法吗？

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

  

注意：如果您使用的是Nuxt / Webpack等，则可能需要使用以下内容构建映像路径：:src="require('~/assets/logo.png')"

Answer 2

使用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>

Answer 3

您可以使用本机html的<img>平台来设置徽标。

然后，您可以使用width或height属性调整它们的大小。