优化

pages/index/chat/messageComponent/imageMessage.vue

@@ -0,0 +1,55 @@
+<template>
+    <view class="image-message" @click="imadeFullScreen">
+        <image class="image" :style="{width: imageWidth + 'rpx', height: imageHeight + 'rpx'}" @load="load" :src="message.url" mode="aspectFit"></image>
+    </view>
+</template>
+
+<script>
+    export default {
+        props: {
+            message: {
+                type: Object,
+                default: ''
+            }
+        },
+        data() {
+            return {
+                imageHeight: 0,
+                imageWidth: 0,
+            }
+        },
+        onLoad() {
+            // 页面加载时执行
+        },
+        methods: {
+            load(event) {
+                if (event.detail.height > 400){
+                    this.imageHeight = 400;
+                }else{
+                    this.imageHeight = event.detail.height
+                }
+                if (event.detail.width > 400){
+                    this.imageWidth = 400;
+                }else{
+                    this.imageWidth = event.detail.width
+                }
+            },
+            // 点击图片全屏显示
+            imadeFullScreen(){
+                wx.navigateTo({
+                    url: '/pages/index/chat/messageComponent/fullscreen/imagePreview?url=' + this.message.url
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .image-message{
+    width: 100%;
+    height: 100%;
+    }
+    .image{
+        border-radius: 20rpx;
+    }
+</style>