<template>
    <img :src="src" :alt="alt" :class="{'imgSizeMedium':size=='medium','imgSizeSmall':size=='small','imgSizeLarge':size=='large',}" >
</template>

<script>
    export default {
        name: "index",
        props:{
            src:{
                type:String,
                default:''
            },
            alt:{
                type:String,
                default:''
            },
            width:{
                type:String,
                default:''
            },
            height:{
                type:String,
                default:''
            },
            size:{
                type:String,
                default:'medium'
            },
        }
    }
</script>

<style scoped lang="scss">
  .imgSizeMedium{
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
  }
  .imgSizeSmall{
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
  }
  .imgSizeLarge{
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 50%;
    display: inline-block;
  }
</style>
