Adding an image to a toolbar in a Vue + Vuetify Single File Compnonent

Question

I'm essentially just remixing the code available here for a side project: https://github.com/aws-samples/aws-ai-qna-bot.git

Problem: I'm trying to insert a centered logo in the toolbar between the app drawer and the logout button. Typically I could accomplish this pretty easily with vanilla HTML and CSS, but this project is leveraging Vue.js and Vuetify, which I'm doing my best to get myself up to speed with.

I've referenced the following documents, including the README.md in the git repo:

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

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

File path: 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>

So far I've tried following the following syntax, which I added right after the v-spacer toward the bottom of the wrapping template tags.

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

and this doesn't seem to be working.

Lastly I'll add that since this environment is deployed to an EC2 instance (don't think you can deploy it locally to prototype via vue serve or at least I haven't been able to), I'm having to do this very roundabout way of prototyping by deploying this S3 bucket where the webpages are built to, then I make this webpack listener which will see whenever I modify a file. Then I can refresh the index.html that is built in the S3 bucket to see my changes. Extremely clunky workflow, I know, but I've never worked in an environment like this so I'm not sure if there's a better way, plus the readme provided in the github repo is very light on details for how to modify the default layout.

Any help/pointers would be greatly appreciated.

Andrew1325 Andrew1325 · Accepted Answer · 2019-03-10T00:26:47

If you are using a relative path to an image use v-img(src="/abc/xyz"). The ':' before src is shorthand for v-bind which you use for data-binding. So if your image path was dynamically generated you'd use :src="dynamicImage"' but if you are hard coding the path use src="/pathto/image.jpg". This might help.

Adding an image to a toolbar in a Vue + Vuetify Single File Compnonent

1 Answers