perf(前端): 模板消息, 查看头部大图

src/config.js

@@ -26,6 +26,7 @@ export const HT3 =  process.env.NODE_ENV === 'production' ? 'https://p9axztuwd7x
 export const DATE_FORMAT = 'YYYY-MM-DD';
 export const DATETIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
 
+export const ERROR_IMG = 'https://hiana-crm.oss-accelerate.aliyuncs.com/WAMedia/afe412d4-3acf-4e79-a623-048aeb4d696a.png';
 export const OSS_URL_CN = 'https://haina-sale-system.oss-cn-shenzhen.aliyuncs.com/WAMedia/';
 export const OSS_URL_AP = 'https://hiana-crm.oss-ap-southeast-1.aliyuncs.com/WAMedia/';
 export const OSS_URL = OSS_URL_AP;

src/views/Conversations/History/MessagesList.jsx

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState, forwardRef, memo } from 'react';
-import { App, Flex, List, Button,  } from 'antd';
+import { App, Flex, List, Button, Image } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
 import { MESSAGE_PAGE_SIZE, fetchMessagesHistory } from '@/actions/ConversationActions';
@@ -9,6 +9,7 @@ import { useShallow } from 'zustand/react/shallow';
 import MergeConversationTo from './MergeConversationTo';
 import BubbleIM from '../Online/Components/BubbleIM';
 import BubbleEmail from '../Online/Components/BubbleEmail';
+import { ERROR_IMG } from '@/config';
 
 const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 20;
 const MessagesList = ({ ...listProps }) => {
@@ -173,7 +174,7 @@ const MessagesList = ({ ...listProps }) => {
         {headerObj ? (
           <div className='text-neutral-500 text-center'>
             {'text' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <div>{headerObj.text}</div>}
-            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <img src={headerObj.parameters[0].image.link} height={100}></img>}
+            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <Image src={headerObj.parameters[0].image.link} height={100} fallback={ERROR_IMG}></Image>}
             {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
               <a href={headerObj.parameters[0][headerObj.parameters[0].type].link} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
                 [&nbsp;{headerObj.parameters[0].type}&nbsp;]

src/views/Conversations/Online/Components/BubbleIM.jsx

@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { App, Button } from 'antd';
+import { App, Button, Image } from 'antd';
 import { ExportOutlined, CopyOutlined, PhoneOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
 import { groupBy, isEmpty, TagColorStyle } from '@/utils/commons';
@@ -7,6 +7,7 @@ import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
 import { ReplyIcon } from '@/components/Icons';
 import ChannelLogo from './ChannelLogo';
+import { ERROR_IMG } from '@/config';
 
 const outboundStyle = {
   'waba': { color: '#ccd4ae' },
@@ -54,7 +55,7 @@ const BubbleIM = ({ handlePreview, handleContactClick, setNewChatModalVisible, s
         {headerObj ? (
           <div className='text-neutral-500 text-center'>
             {'text' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <div>{headerObj.text}</div>}
-            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <img src={headerObj.parameters[0].image.link} height={100}></img>}
+            {'image' === (headerObj?.parameters?.[0]?.type || '').toLowerCase() && <Image src={headerObj.parameters[0].image.link} height={100} fallback={ERROR_IMG}></Image>}
             {['document', 'video'].includes((headerObj?.parameters?.[0]?.type || '').toLowerCase()) && (
               <a href={headerObj.parameters[0][headerObj.parameters[0].type].link} target='_blank' key={headerObj.format} rel='noreferrer' className='text-sm'>
                 [&nbsp;{headerObj.parameters[0].type}&nbsp;]