如何在Vuetify中将徽标添加到AppBar？

Question

我有一个v-app-bar控件，我正在尝试向其中添加徽标/图像。

Veutify中是否有将徽标添加到AppBar的标准方法？

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-heightand很重要max-width，否则图像将垂直溢出导航并水平推动标题。并且还设置contain为保留纵横比

CodePen 中的演示

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

Answer 2

您可以直接使用<img>本机 html 中的应答器来设置您的徽标。

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