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在本地将其部署到原型，或者至少我没有能力），所以我m必须通过在构建网页的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可能会有帮助。

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

1 个答案: