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

Eri*_*ick 5 vue-component vuetify.js

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

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

Kyl*_*Mit 16

您可以添加这样的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>
Run Code Online (Sandbox Code Playgroud)

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

CodePen 中的演示

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

  • 有没有一种无需对值进行硬编码的解决方案?我希望有一种方法可以让 v-img 继承其父级的高度并保持纵横比。 (2认同)

小智 1

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

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