How to add custom-logo/image in toolbar using vuetify

Question

I am trying to add image/custom logo in the toolbar using Vuetify. I am using v-toolbar to create the navigation bar.

The image is not showing up. It shows the error of [Vuetify] Image load failed src: ../assets/mad_logo.png

I tried using <v-img> But it did not work.

This is how the navigation bar looks like

This is the code:

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>

This is the directory structure:

How do I attach the logo on the top left of the navigation bar and load the image correctly.

Any code changes would work. Thanks!

Solution 1

With Vuetify 2 and above version, you can add a logo before your toolbar title like this:

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

Also, <v-toolbar-side-icon> is already <v-app-bar-nav-icon>

Solution 2

Try to use :

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

Solution 3

Instead of using require the loader won't digest to render your actual page

So i prefered the code and enjoy!

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

Regards,

Kamalesh Sivaraj!

Comments

[nishkaush]

You can also try this if the above answer doesn't work- <v-img :src="require('../assets/mad_logo.png')" >

[Marcelus Trojahn]

this is def the right answer for vuetify2 a toolbar image.