BootstrapVue Avatar 显示 文字、图像、图标

BootstrapVue Avatar 支持文字、图像、图标还有自定义类型。

例子

图片内容

<b-avatar variant="warning" src="https://www.itxst.com/img/logo.png">
</b-avatar>

图标内容

<template>
  <div> 
    <b-avatar icon="music-note"></b-avatar>
    <b-avatar icon="people-fill"></b-avatar>
    <b-avatar icon="star-fill"></b-avatar>
    <b-avatar icon="people-fill" size="50px"></b-avatar>
  </div>
 </template>

文字内容

<template>
  <div>
    <b-avatar text="A"></b-avatar>
    <b-avatar text="B"></b-avatar>
    <b-avatar text="C"></b-avatar>
    <b-avatar text="D" size="60px"></b-avatar>
  </div>
 </template>

自定义内容

<b-avatar><custom-icon></custom-icon></b-avatar>

完整代码

<template>
  <div id="app">
    <b-avatar variant="warning" src="https://www.itxst.com/img/logo.png"></b-avatar>
    <b-avatar variant="secondary" icon="music-note"></b-avatar>
    <b-avatar variant="dark" icon="people-fill"></b-avatar>
    <b-avatar variant="danger" icon="star-fill"></b-avatar>
    <b-avatar variant="info" icon="people-fill" size="50px"></b-avatar>
    <b-avatar variant="success" ext="A"></b-avatar>
    <b-avatar variant="primary" text="B"></b-avatar>
    <b-avatar variant="warning" text="C"></b-avatar>
    <b-avatar variant="danger" text="D" size="60px"></b-avatar>
  </div>
</template>
<script>
//导入vue和BootstrapVue
import Vue from "vue";
import { BootstrapVue } from "bootstrap-vue";
//注册BootstrapVue组件
Vue.component("BootstrapVue", BootstrapVue);
export default {
  name: "App",
  data() {
    return { 
    };
  }, 
  methods: {  
  },
};
</script>