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!
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>
Try to use :
<v-img :src="require('@/assets/mad_logo.png')" >
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With