在 Vue + Vuetify 单文件组件中将图像添加到工具栏

Question

我基本上只是在为一个副项目重新混合这里可用的代码：https://github.com/aws-samples/aws-ai-qna-bot.git

问题：我试图在应用抽屉和注销按钮之间的工具栏中插入一个居中的徽标。通常情况下，我可以使用原生 HTML 和 CSS 轻松完成此任务，但这个项目使用的是 Vue.js 和 Vuetify，我正在尽我最大的努力让自己跟上进度。

我参考了以下文档，包括 git repo 中的README.md：

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 这个 webpack 侦听器将在我修改文件时看到。然后我可以刷新在 S3 存储桶中构建的 index.html 以查看我的更改。我知道，工作流程非常笨拙，但我从来没有在这样的环境中工作过，所以我不确定是否有更好的方法，而且 github repo 中提供的自述文件对如何修改默认布局的细节非常简单.

任何帮助/指针将不胜感激。

Answer 1

如果您使用图像的相对路径，请使用v-img(src="/abc/xyz")。 src 之前的 ':' 是用于数据绑定的 v-bind 的简写。因此，如果您的图像路径是动态生成的，您将使用:src="dynamicImage"'，但如果您对路径进行硬编码，请使用src="/pathto/image.jpg"。 This 可能会有所帮助。