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

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!