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

Posted 2023-02-22

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

【英文标题】：How to add custom-logo/image in toolbar using vuetify

【发布时间】：2019-10-29 15:37:13

【问题描述】：

我正在尝试使用 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"
        
      >
    </v-avatar>


  </v-toolbar>


</template>

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

    ,
    data() 
      return 

      
    ,
    methods: 

    ,
    computed: 

    

</script>

<style scoped >

</style>

这是目录结构：

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

任何代码更改都可以。 谢谢！

【参考方案1】：

尝试使用：

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

【讨论】：

如果上面的答案不起作用，你也可以试试这个 -

【参考方案2】：

我已经尝试将这个 html <img src="/assets/mad_logo.png" height="20px"> 放在我的工具栏上。

【参考方案3】：

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

<v-toolbar>
  <!-- Adjust the height to your needs, mine is 40 -->
  <img class="mr-3" :src="require('../assets/your_image.png')" />
  <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>

【讨论】：

这是 vuetify2 工具栏图像的正确答案。

【参考方案4】：

加载器不会消化来呈现您的实际页面，而不是使用 require

所以我更喜欢代码并享受！

     <v-toolbar-side-icon>
            <v-img class="mr-3" src="@/assets/logo.png"  > 
            </v-img>
     </v-toolbar-side-icon>

问候，

Kamalesh Sivaraj!