Почему фоновое изображение панели приложения vuetify не отображается? - PullRequest
Новая
       45

Почему фоновое изображение панели приложения vuetify не отображается?

0 голосов
/ 02 мая 2020

Я пытаюсь загрузить svg в качестве фонового изображения панели приложения. Но это не показ. Хотя компонент изображения в панели приложения работает, изображение работает при общем использовании в шаблоне, поскольку sr c не отображается на заднем плане: 

 <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app src="~assets/background.svg">
      <img src="~assets/background.svg" />
      <template v-slot:img="{ props }">
        <v-img v-bind="props"></v-img>
      </template>

      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title class="text-left hidden-sm-and-down">Database</v-toolbar-title>
    </v-app-bar>

приводит к resulting app bar

В результате выполнения команды 

 <v-app-bar :clipped-left="$vuetify.breakpoint.lgAndUp" app src="~assets/background.svg">
      <template v-slot:img="{ props }">
        <v-img v-bind="props"></v-img>
      </template>

      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
      <v-toolbar-title class="text-left hidden-sm-and-down">Database</v-toolbar-title>
    </v-app-bar>

появляется просто пустая панель приложения.

Похоже, это связано либо с поддержкой svg на фоне панели приложения, управление активами nuxt или отсутствие понимания того, какие реквизиты передаются элементу шаблона ...

Я установил пакет @ nuxtjs / svg для поддержки отображения svg, и используйте его в соответствии с инструкциями по установке и использованию , но остальное здесь не могу выяснить.

Любая поддержка или советы приветствуются.

1 Ответ

0 голосов
/ 02 мая 2020

Как раз когда я собирался опубликовать это, я выполнил окончательный поиск своей проблемы и нашел другой вопрос, где синтаксис немного отличался и работал, когда принятый подход работал для моего случая:

Их код: 

 <v-app-bar app>

            <v-btn v-if="$vuetify.breakpoint.smAndDown" @click="openDrawer = !openDrawer" text icon>
                <v-icon>mdi-view-headline</v-icon>
            </v-btn>
            <v-btn v-else :to="{name: 'home'}" text color="primary" class="ml-3" icon>
                <!-- Logo -->
                <img height="48"
                     :src="require('@/assets/logo.svg')"
                     alt="Manassa Logo"/>
            </v-btn>

            {{more stuff}}
        </v-app-bar>

---> 

    <v-app-bar
      :clipped-left="$vuetify.breakpoint.lgAndUp"
      app
      dark
      :src="require('@/assets/images/app-bar-background.svg')"
    >
...