Как добавить логотип в AppBar в Vuetify?

Question

У меня есть v-app-bar элемент управления, и я пытаюсь добавить логотип / изображение к нему.

Существует ли в Veutify стандартный подход для добавления логотипа в панель приложений?

Answer 1

Вы можете добавить компонент v-img следующим образом:

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

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

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

</v-app-bar>

Важно установить max-height и max-width, в противном случае изображение будет перетекать по вертикали и толкать заголовок по горизонтали. А также установите contain для сохранения соотношения сторон

Демонстрация в CodePen

Примечание : Если вы используете Nuxt / Webpack и т. Д., Вам может понадобиться построить путь к изображению примерно так: :src="require('~/assets/logo.png')"

Answer 2

Yon может использовать <img> balise из встроенного HTML, чтобы установить свой логотип.

Затем вы можете изменить их размер с помощью свойства width или height.