Comment ajouter un logo / image personnalisé dans la barre d'outils à l'aide de vuetify

Question

J'essaie d'ajouter une image/un logo personnalisé dans la barre d'outils à l'aide de Vuetify. J'utilise v-toolbar pour créer la barre de navigation.

L'image ne s'affiche pas. Il montre l'erreur de [Vuetify] Image load failed src: ../assets/mad_logo.png

J'ai essayé d'utiliser <v-img> Mais cela n'a pas fonctionné.

Voici à quoi ressemble la barre de navigation

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

Voici la structure du répertoire:

Comment attacher le logo en haut à gauche de la barre de navigation et charger correctement l'image.

Toute modification de code fonctionnerait. Merci!

Answer 1

J'ai essayé de mettre ce HTML <img src="/assets/mad_logo.png" height="20px"> et il semble être correct sur ma barre d'outils.