caimei-applets-store/pages/views/others/image-view.vue

<template>
    <image
        class="image"
        :src="imageUrl"
        mode="aspectFit"
        @load="onImageLoad"
        :style="{ width: styleObj.width, height: styleObj.height }"
    ></image>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    data() {
        return {
            imageUrl: '',
            detail: null
        }
    },
    computed: {
        ...mapGetters(['systemInfo']),
        styleObj() {
            if (!this.detail) return {}
            const { width, height } = this.detail
            const { screenWidth } = this.systemInfo
            let w = width
            let h = height
            if (width > screenWidth) {
                w = screenWidth
                h = (height * screenWidth) / width
            }
            const style = { width: w + 'px', height: h + 'px' }
            return style
        }
    },
    onLoad(options) {
        console.log(this.systemInfo)
        this.imageUrl = options.imageUrl && decodeURIComponent(options.imageUrl)
    },
    methods: {
        onImageLoad(e) {
            console.log(e)
            this.detail = e.detail
        }
    }
}
</script>

<style scoped>
.image {
    display: block;
    margin: 0 auto;
}
</style>