2
votes

Comment ajouter un logo / une image personnalisé dans la barre d'outils en utilisant Vuetify

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

L'image ne s'affiche pas. Il montre l'erreur de [Vuetify] Le chargement de l'image a échoué src: ../assets/mad_logo.png

J'ai essayé d'utiliser 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 l'image correctement.

Toute modification du code fonctionnerait. Merci!

html css vue.js vuetify.js

0 commentaires

4 Réponses :

5
votes

Essayez d'utiliser:

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

1 commentaires

Vous pouvez également essayer ceci si la réponse ci-dessus ne fonctionne pas -

0
votes

J'ai essayé de mettre ce code HTML et il semble être correct sur ma barre d'outils.

0 commentaires

6
votes

Avec Vuetify 2 et la version supérieure, vous pouvez ajouter un logo avant le titre de votre barre d'outils comme ceci:

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

Aussi, est déjà

1 commentaires

c'est la bonne réponse pour vuetify2 une image de barre d'outils.

3
votes

Au lieu d'utiliser require, le chargeur ne digère pas pour rendre votre page réelle

J'ai donc préféré le code et profitez-en!

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

Cordialement,

Kamalesh Sivaraj !

1 commentaires

lol le composant n'existe même pas