开发: 聊天页面修改

src/pages/ChatLogs/components/ChatImage.tsx

@@ -1,13 +1,17 @@
+import { Image } from 'antd';
+import { useState } from 'react';
 import { IChatItem } from '../ChatLogsType';
 import styles from './index.module.scss';
 
 export const ChatImage: React.FC<IChatItem> = (props) => {
+  const [visible, setVisible] = useState(false);
   function content() {
     try {
       const msg = JSON.parse(props.chat?.content as string);
 
       return (
         <div
+          className={styles.imgPreview}
           style={{
             display: 'flex',
             color: '#000',
@@ -16,7 +20,13 @@ export const ChatImage: React.FC<IChatItem> = (props) => {
             justifyContent: 'center',
           }}
         >
-          <img
+          <Image
+            preview={{
+              visible: visible,
+              onVisibleChange: (value, prevValue, currentIndex) => {
+                setVisible(value);
+              },
+            }}
             src={`/api/${msg.path}`}
             style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }}
             alt=""