无法在带有圆角的b-img中添加图像

时间:2019-06-06 08:43:06

标签: css bootstrap-vue

我正在尝试创建一个导航栏,该导航栏的右上角有一个圆形图像。我正在使用bootstrap-vue创建它。我已阅读boots-vue文档以添加圆角。但是找不到在其中添加图像的方法。我能添加的只是方块颜色

我已经尝试在<b-img>标签上添加不同的属性。 但它不起作用

代码如下:

NavigationBar.vue:

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="light">
      <b-navbar-brand href="#">
        <img src="./../assets/logo.png" alt="mad_logo" />
      </b-navbar-brand>
      <b-navbar-nav class="ml-auto">
        <b-img v-bind="imageSetter" rounded="circle" alt="Profile"></b-img>
      </b-navbar-nav>  
    </b-navbar>


  </div>
</template>

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

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

</style>

我可以通过以在其中添加图像的prop属性是什么? 感谢您的帮助

0 个答案:

没有答案