Как добавить изображение в bootstrap-vue закругленный угол

Question

Я пытаюсь использовать bootstrap-vue для создания приложения. Мое приложение содержит панель навигации в правом верхнем углу. Я пытаюсь добавить круглое изображение. Я кое-как узнал, как добавить цвет блока круглой формы. Но я не могу добавить изображение на него

Я пытался использовать разные атрибуты и реквизиты, чтобы заставить его работать. Но это не работает. Я использую тег <b-img>, чтобы сделать изображения отзывчивыми. Это фрагмент кода, на который я ссылался из https://bootstrap -vue.js.org / docs / components / image /

<template>
  <div>
    <b-img v-bind="mainProps" rounded alt="Rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="top" alt="Top-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="right" alt="Right-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="bottom" alt="Bottom-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="left" alt="Left-rounded image"></b-img>
    <b-img v-bind="mainProps" rounded="circle" alt="Circle image"></b-img>
    <b-img v-bind="mainProps" rounded="0" alt="Not rounded image"></b-img>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mainProps: { blank: true, blankColor: '#777', width: 75, height: 75, class: 'm1' }
      }
    }
  }
</script>

Вот мой код:

NavigationBar.vue:

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="light">
      <b-navbar-brand href="#">
        <img src="./../assets/logo.png" alt="logo" />
      </b-navbar-brand>
      <b-navbar-nav class="ml-auto">        
          <b-button size="sm" variant="light">
            <b-img v-bind="imageSetter" rounded="circle" alt="Profile"></b-img>
            <b-dropdown id="dropdown-1"  class="m-2" dropleft variant="light">
              <b-dropdown-item>Profile</b-dropdown-item>
              <b-dropdown-item>CPPI</b-dropdown-item>
              <b-dropdown-item>Cred</b-dropdown-item>              
              <b-dropdown-item>Settings</b-dropdown-item>              
              <b-dropdown-item>Logout</b-dropdown-item>              
            </b-dropdown>
          </b-button>

      </b-navbar-nav>  
    </b-navbar>
  </div>
</template>

<script>
export default {
  name: 'NavigationBar',
  data() {
    return {
      imageSetter: {
        blank: false, width: 50, height: 50, class: 'm1'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Я знаю, должен быть атрибут, который я могу передать. Но я не могу его найти.

Как добавить на него округленное изображение?

Спасибо

EDIT: Когда я передал атрибут src. и проверил во время проверки, он показывает правильный путь к изображению, но не отображает.