Добавление изображения на панель инструментов в компоненте Vue + Vuetify Single File - PullRequest
Новая
       2

Добавление изображения на панель инструментов в компоненте Vue + Vuetify Single File

0 голосов
/ 09 марта 2019

Я просто делаю ремикс кода, доступного здесь для стороннего проекта: https://github.com/aws-samples/aws-ai-qna-bot.git

Проблема : я пытаюсь вставить центрированный логотип на панели инструментов между приложениемящик и кнопка выхода.Как правило, я могу довольно легко это сделать с помощью ванильного HTML и CSS, но этот проект использует Vue.js и Vuetify, и я делаю все возможное, чтобы освоиться с ним.

Я ссылался наследующие документы, включая README.md в репозитории git:

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 этот прослушиватель веб-пакетов, который будет видеть каждый раз, когда я изменяю файл.Затем я могу обновить index.html, встроенный в корзину S3, чтобы увидеть мои изменения.Очень неуклюжий рабочий процесс, я знаю, но я никогда не работал в такой среде, поэтому я не уверен, что есть лучший способ, плюс readme, предоставляемый в репозитории github, очень легок в деталях, как изменить макет по умолчанию.

Любая помощь / указатели будут с благодарностью.

1 Ответ

0 голосов
/ 10 марта 2019

Если вы используете относительный путь к изображению, используйте v-img(src="/abc/xyz").':' Перед src является сокращением для v-bind, которое вы используете для привязки данных.Поэтому, если ваш путь к изображению был сгенерирован динамически, вы бы использовали :src="dynamicImage" ', но если вы жестко его кодировали, используйте src="/pathto/image.jpg". Это может помочь.

...