添加预览图片

src/views/im/chat/index.vue

@@ -45,8 +45,7 @@
               <div class="img-message" v-else-if="item.contentType === MSG_TYPE.IMAGE">
                 <van-image
                   :src="item?.localUrl ||  IM_PATH + item.url"
-                  alt="图片"
-                  style="max-width: 120px; border-radius: 8px"
+                  style="max-width: 120px; border-radius: 8px" @click="previewImage(item)"
                 />
               </div>
 
@@ -175,10 +174,9 @@ import { Keyboard } from "@capacitor/keyboard";
 import { Capacitor } from "@capacitor/core";
 import { MSG_TYPE, MESSAGE_TYPE_USER } from "@/common/constant/msgType";
 import  messageAudio from "@/views/im/components/messageAudio/index.vue";
-import { showToast } from 'vant';
+import { showToast,showImagePreview } from 'vant';
 import {useWebRTCStore} from "@/stores/modules/webrtcStore";
 
-
 const IM_PATH = import.meta.env.VITE_IM_PATH_FIlE;
 // 路由 & store
 const router = useRouter();
@@ -249,6 +247,12 @@ const toggleAppBox = async (type) => {
   scrollToBottom();
 };
 
+// 预览图片
+const previewImage = (item) => {
+  const url = item?.localUrl || IM_PATH + item.url;
+  showImagePreview([url]);
+};
+
 const onFocus = () => {
   // 隐藏所有面板
   showEmoji.value = false;