Vue + Vuetify Single FileCompnonentのツールバーに画像を追加する

私は基本的に、サイドプロジェクト用にここで利用可能なコードをリミックスしています：https：//github.com/aws-samples/aws-ai-qna-bot.git

問題：ツールバーのアプリドロワーとログアウトボタンの間の中央にロゴを挿入しようとしています。通常、これはバニラHTMLとCSSを使用して非常に簡単に実行できますが、このプロジェクトではVue.jsとVuetifyを活用しており、これらを最大限に活用しています。

README.mdgitリポジトリを含む次のドキュメントを参照しました。

https://vuetifyjs.com/en/components/images

https://vuejs.org/v2/guide/single-file-components.html

ファイルパス：qna-bot-template/website/js/admin.vue

<template lang="pug">
  v-app
    v-navigation-drawer(temporary v-model="drawer" app)
      v-toolbar(flat)
        v-list
          v-list-tile
            v-list-tile-title.title Tools
      v-divider
      v-list(dense three-line subheader)
        v-list-tile(v-for="(page,key) in pages" :key="key"
          @click="drawer=false" 
          :href="page.href"
          :id="'page-link-'+page.id"
          :target="page.target || '_self'") 
          v-list-tile-avatar
            v-icon(color="primary") {{page.icon}}
          v-list-tile-content
            v-list-tile-title {{page.title}}
            v-list-tile-sub-title {{page.subTitle}}
        v-list-group( prepend-icon="info" value="true" color="primary")
          v-list-tile(slot="activator") 
            v-list-tile-title QnABot Help
          v-list-tile
            v-list-tile-content 
              v-list-tile-title Version: {{Version}}
              v-list-tile-title BuildDate: {{BuildDate}}
          v-list-tile
            v-list-tile-content
              v-list-tile-title 
                a(href="https://amazon.com/qnabot" target="_blank") General Instructions / QnABot Blog Post
              v-list-tile-title
                a(href="https://aws.amazon.com/blogs/machine-learning/creating-virtual-guided-navigation-using-a-question-and-answer-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Guided Navigation using QnABot
              v-list-tile-title
                a(href="https://aws.amazon.com/blogs/machine-learning/create-a-questionnaire-bot-with-amazon-lex-and-amazon-alexa/" target="_blank") Create a questionnaire using QnABot
    v-toolbar(app fixed)
      v-toolbar-side-icon.primary--text(
        id="nav-open"
        @click.stop="drawer = !drawer"
      )
      v-toolbar-title 
        v-breadcrumbs
          v-breadcrumbs-item(href='#/edit') {{$store.state.info.StackName}}:{{$store.state.user.name}}
          v-breadcrumbs-item {{page}}
      v-spacer
      v-toolbar-items
        v-btn.primary--text(flat
          id="logout-button"
          @click="logout"
          v-if="login") LogOut
    v-container(fluid id="workspace")
      v-layout(column)
        v-flex
          router-view
    v-footer
</template>

これまでv-spacer、ラッピングテンプレートタグの下部に向かって直後に追加した次の構文に従ってみました。

v-container
  v-img(:src="/abc/xyz")

これは機能していないようです。

最後に、この環境はEC2インスタンスにデプロイされているため（ローカルでプロトタイプにデプロイできるとは思わないvue serveか、少なくとも私はできませんでした）、これを非常に迂回する方法で行う必要があります。ウェブページが構築されている場所にこのS3バケットをデプロイすることでプロトタイピングmakeを行うと、ファイルを変更するたびに表示されるこのウェブパックリスナーになります。次に、S3バケットに組み込まれているindex.htmlを更新して、変更を確認できます。非常に不格好なワークフローですが、私はこのような環境で作業したことがないので、より良い方法があるかどうかわかりません。さらに、githubリポジトリで提供されるreadmeは、デフォルトのレイアウトを変更する方法の詳細について非常に簡単です。 。

ヘルプ/ポインタをいただければ幸いです。