scrm.antd/src/pages/ChatLogs/components/ChatImage.tsx

import { Image } from 'antd';
import React, { 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',
            width: 180,
            height: 150,
            justifyContent: 'center',
          }}
        >
          <Image
            preview={{
              visible: visible,
              onVisibleChange: (value) => {
                setVisible(value);
              },
            }}
            src={`/api/${msg.path}`}
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'contain',
            }}
            alt=""
          />
        </div>
      );
    } catch (_e) {
      return (
        <div>
          <div style={{ wordBreak: 'break-all', paddingRight: 8 }}>{props.chat?.content}</div>
        </div>
      );
    }
  }

  return <>{content()}</>;
};