如何使用 bootstrap-vue 修复模态标题中的图像答案

【问题标题】：How to fix an image in a modal header with bootstrap-vue如何使用 bootstrap-vue 修复模态标题中的图像
【发布时间】：2019-07-31 08:38:55
【问题描述】：

我正在尝试在我的模态标题中插入一个简单的徽标。但是我使用的是 bootstrap-vue 并且我没有真正的标题，然后我不知道如何插入图像。我正在尝试使用参数 img=""，带有 id 的 css 但这不起作用。

In top of modal like this

    <b-modal
       id="modal-1"
       ref="authenticate-modal"
       hide-footer
       v-model="modalOpen"
    >
      <b-tabs class="px-3 pb-3">
        <b-tab title="Se connecter" active>
           <Login />
        </b-tab>
        <b-tab title="S'inscrire">
           <Register />
        </b-tab>
      </b-tabs>
    </b-modal>

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

您可以在 modal-title 插槽中添加自定义 html，如下所示。

阅读docs了解更多详情

 <b-modal
       id="modal-1"
       ref="authenticate-modal"
       hide-footer
       v-model="modalOpen"
    >
  <div slot="modal-title">
    Authenticate Modal
    <img :src="imgpath"></img>
  </div>
</b-modal>

【讨论】：