如何使用 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>

这是目录结构：

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

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

原文由 abhigyan nayak 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

原文由 wobsoriano 发布，翻译遵循 CC BY-SA 4.0 许可协议