如何使用 vuetify 在工具栏中添加自定义徽标/图像

Question

我正在尝试使用 Vuetify 在工具栏中添加图像/自定义徽标。我正在使用v-toolbar创建导航栏。

图像不显示。它显示了错误[Vuetify] Image load failed src: ../assets/mad_logo.png

我尝试使用<v-img> 但它没有用。

这是导航栏的样子

这是代码：

VuetifyTest.js

   <v-toolbar
    color="primary"
    >



    <v-toolbar-side-icon>
        <v-img src="../assets/mad_logo.png" />
    </v-toolbar-side-icon>  
    <v-toolbar-title class="black--text">Title</v-toolbar-title>

    <v-spacer></v-spacer>
    <v-avatar>
      <img
        src="../assets/static.jpeg"
        alt="John"
      >
    </v-avatar>


  </v-toolbar>


</template>

<script lang="js">
  export default  {
    name: 'profile',
    props: [],
    mounted() {

    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {

    }
}
</script>

<style scoped >

</style>

这是目录结构：

如何在导航栏左上角附加徽标并正确加载图像。

任何代码更改都会起作用。谢谢！

Answer 1

使用Vuetify 2及以上版本，您可以在工具栏标题前添加徽标，如下所示：

<v-toolbar>
  <!-- Adjust the height to your needs, mine is 40 -->
  <img class="mr-3" :src="require('../assets/your_image.png')" height="40"/>
  <v-toolbar-title>Title</v-toolbar-title>
  <v-spacer></v-spacer>
  <v-toolbar-items>
    <v-btn text>Home</v-btn>
    <v-btn text>About</v-btn>
  </v-toolbar-items>
</v-toolbar>

还有，<v-toolbar-side-icon>已经<v-app-bar-nav-icon>

Answer 2

尝试使用：

<v-img :src="require('@/assets/mad_logo.png')" >