Vuetifyを使用してツールバーにカスタムロゴ/画像を追加する方法

Question

Vuetifyを使用してツールバーに画像/カスタムロゴを追加しようとしています。ナビゲーションバーの作成にv-toolbarを使用しています。

画像が表示されない。 [Vuetify] Image load failed src: ../assets/mad_logo.pngのエラーが表示されます

<v-img>を使ってみましたが、うまくいきませんでした。

これは、ナビゲーションバーの外観です。

これはコードです：

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>

これはディレクトリ構造です：

ナビゲーションバーの左上にロゴを付けて、画像を正しく読み込むにはどうすればよいですか。

コードの変更は機能します。ありがとう！

Answer 1

私はこのHTMLを入れようとしました<img src="/assets/mad_logo.png" height="20px">とツールバーに問題がないようです。