增加图片消息处理

src/charts/Wechat_session.js

@@ -29,6 +29,32 @@ class Wechat_session extends Component {
         const {wechatStore} = this.context;
         wechatStore.fetchChatMsgList(wechatStore.selectedContact, page, pageSize);
     }
+
+    renderMsgItem(chatMsg) {
+        if (chatMsg.msgtype === 'image') {
+            return (
+            <List.Item className='ant-list-item-no-flex'>
+                <List.Item.Meta
+                    avatar={<Avatar src={chatMsg.from_avatar} />}
+                    title={chatMsg.from_name}
+                    description={chatMsg.msgtime}
+                />     
+                <img style={{width: '50%', height: '50%'}} alt={chatMsg.msgid} src={chatMsg.content.imageurl} />                       
+            </List.Item> 
+        )} else {
+            return (
+                <List.Item>
+                    <List.Item.Meta
+                        avatar={<Avatar src={chatMsg.from_avatar} />}
+                        title={chatMsg.from_name}
+                        description={chatMsg.msgtime}
+                    />
+                    {chatMsg.content.text}                                
+                </List.Item> 
+            )
+        }
+    }
+
     render() {
         const {wechatStore} = this.context;
         const userList = wechatStore.userList;
@@ -71,6 +97,7 @@ class Wechat_session extends Component {
                         )}
                     />
                 </Col>
+
                 <Col span={12}>
                     <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
                     <List
@@ -78,16 +105,7 @@ class Wechat_session extends Component {
                         bordered={true}
                         itemLayout="horizontal"
                         dataSource={chatMsgList}
-                        renderItem={(chatMsg) => (
+                        renderItem={(chatMsg) => this.renderMsgItem(chatMsg)}
-                            <List.Item>
-                                <List.Item.Meta
-                                    avatar={<Avatar src={chatMsg.from_avatar} />}
-                                    title={chatMsg.from_name}
-                                    description={chatMsg.msgtime}
-                                />
-                                {chatMsg.content.text}
-                            </List.Item>
-                        )}
                     />
                     <Pagination 
                         current={chatMsgPage.currpage}