为什么我的 vuetify 应用栏背景图片不显示？答案

【问题标题】：Why is my vuetify app bar background image not showing?为什么我的 vuetify 应用栏背景图片不显示？
【发布时间】：2020-05-02 07:42:14
【问题描述】：

我正在尝试将 svg 加载为应用栏背景图像。但它没有显示。虽然应用栏中的图像组件可以正常工作，但图像通常在模板中使用时可以正常工作，因为它不会在后台显示 src：

 <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>

结果为@987654321@

在做的时候

 <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 asset management 或我缺乏理解传递给模板元素的道具有关...

我首先安装了@nuxtjs/svg 包来支持svg 显示并按照installation and usage instructions 使用它，但这里无法弄清楚其余的。

非常感谢任何支持或提示。

【问题讨论】：

标签： webpack vuetify.js nuxt.js assets

【解决方案1】：

就在我即将发布此内容时，我对我的问题和found another question, where the syntax was a slightly different 进行了最终搜索并工作，当我的案例被采用时：

他们的代码：

 <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')"
    >

【讨论】：