<template>
    <div :class="['hanzo-image', {hasImg: src}]" @click="handleClick">
        <img :class="classes( { img: src } )" v-if="src" :src="src" :style="{ 'object-fit': mode }"/>
        <!-- <div :class="classes( [ 'img', this.mode] )" v-if="src" :style="{ backgroundImage: `url(${ src })` }" /> -->
    </div>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
let classMixin = classesMixin('image');
export default {
    name: 'h-image',
    props: {
        src: String,
        mode: {
            type: String,
            default: 'cover'
        }
    },
    mixins: [classMixin],
    methods: {
        handleClick() {
            this.$emit( 'click' )
        }
    },
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>