如何在 Vuetify 中为 AppBar 添加徽标？答案

【问题标题】：How to add logo to AppBar in Vuetify?如何在 Vuetify 中为 AppBar 添加徽标？
【发布时间】：2019-06-03 03:34:03
【问题描述】：

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

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

【问题讨论】：

请分享一些代码。你试过什么？请参阅本指南以提供可验证的示例 - stackoverflow.com/help/mcve
codepen.io/anon/pen/…

【解决方案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很重要，否则图片会垂直溢出nav并水平推过标题。并设置contain 以保持纵横比

Demo in CodePen

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

【讨论】：

仅供参考，将高度硬编码为40 让我很困扰，但对于各种屏幕尺寸和缩放来说，这看起来是一个相当合理的值。
有没有不硬编码值的解决方案？我希望有一种方法可以让 v-img 继承其父级的高度并保持纵横比。

【解决方案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>

【讨论】：

如果您的徽标是矩形，这真的很小。不推荐。

【解决方案3】：

您可以使用原生 html 中的 <img> 应答器来设置您的徽标。

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

【讨论】：