qimall/backend/views/components/common/com-image.php

<template id="com-image">
    <div class="com-image" :style="style">
        <image v-if="src" :width="image_width" :height='image_height' :src="src" ></image>
        <image v-if="default_src" :width="image_width" :height='image_height' :src="default_src" ></image>
        <image v-if="!src&&!default_src" :width="image_width" :height='image_height' src="resources/img/mall/default_img.png" ></image>
    </div>
</template>
<script>
    Vue.component('com-image', {
        template: '#com-image',
        props: {
            src: String,
            default_src:String,
            mode: String,
            width: String,
            height: String,
            radius: String
        },
        data() {
            return {
                image_width: '50px',
                image_height: '50px',
            };
        },
        created() {
        },
        computed: {
            style() {
                let width = '50px';
                let height = '50px';
                let radius = '0%';
                let bgSize = 'cover';
                let bgPosition = 'center';
                switch (this.mode) {
                    case 'scaleToFill':
                        bgSize = '100% 100%';
                        break;
                    default:
                        bgSize = 'cover';
                        break;
                }
                if (this.width) {
                    this.image_width = width = this.width + (isNaN(this.width) ? '' : 'px');
                }

                if (this.height) {
                    this.image_height = height = this.height + (isNaN(this.height) ? '' : 'px');
                }
                if (this.radius) {
                    radius = this.radius + (isNaN(this.radius) ? '' : '%');
                }

                let background_image_url = ``;
                // background_image_url = `background-image:url(${this.src ? this.src : 'resources/img/mall/default_img.png'});`;

                return background_image_url
                    + `background-size:${bgSize};`
                    + `background-position:${bgPosition};`
                    + `width:${width};`
                    + `height:${height};`
                    + `border-radius: ${radius};`;
            },
        },
        methods: {},
    });
</script>