<template>
    <div class="ktj-image" :style="'width:'+width+';height:'+height">
        <img :src="imgSrc" @error="onerror" />
    </div>
</template>
<script>
export default {
    name:'ImageComonent',
    props:{
        /**图片地址 */
        src:String,
        /**图片类别 */
        type:String,
        /**图片大小 */
        width:String,
        height:String
    }, 
    data(){
        let _defaultImg = require('./default-img.png')
        switch(this.type){
            case 'user':
                _defaultImg = require('./default-avatar.jpg')
                break
            case 'logo':
                _defaultImg = require('./default-logo.png')
                break
        }
        return {
            imgSrc:this.src,
            defaultImg:_defaultImg
        }
    },
    methods:{
        /**
         * 处理图片加载出错
         */
        onerror(){
            this.imgSrc = this.defaultImg
        }
    },
    watch:{
        src(_imgSrc){
            this.imgSrc = _imgSrc
        }
    }
}
</script>
<style scoped>
.ktj-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
</style>
