uniIM/components/messages/MessageImage.vue

<template>
  <view v-if="message.messageType===MessageType.image && message.extend" >
    <image style="width: 200rpx;" mode="widthFix" :src="message.extend.url"  @tap="preImg(message.extend.url)"/>
  </view>
  <q-preview-image ref="previewImage" :urls="[message.extend?.url]"></q-preview-image>
</template>

<script setup lang="ts">
import MessageType from "@/utils/MessageType";
import type Message from "@/mode/Message";
import QPreviewImage from "@/uni_modules/q-previewImage/components/q-previewImage/q-previewImage.vue";
import {ref} from "vue";
const previewImage = ref(null);
interface Props<T> {
  message: T
}
defineProps<Props<Message>>()

const preImg = (url:string) => {
  previewImage.value?.open(url)
}

</script>

<style scoped>
.ulink{
  display: block;
  color: #1cbbb4;
}
</style>