<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: 90px;
    height: 120px;
    overflow: hidden;
    border-radius: 4px;
    display: inline-block;
  }
  .imgSizeSmall{
    width: 60px;
    height: 80px;
    overflow: hidden;
    border-radius: 4px;
    display: inline-block;
  }
  .imgSizeLarge{
    width: 168px;
    height: 224px;
    overflow: hidden;
    border-radius: 4px;
    display: inline-block;
  }
</style>
