diff --git a/quickapp/src/pages/component/Message/index.ux b/quickapp/src/pages/component/Message/index.ux
index 59aecdf..cd741ec 100644
--- a/quickapp/src/pages/component/Message/index.ux
+++ b/quickapp/src/pages/component/Message/index.ux
@@ -1,5 +1,6 @@
 <import name="msg-text" src="./msg-text"></import>
-<import name="msg-markdown" src="./msg-text"></import>
+<import name="msg-image" src="./msg-image"></import>
+<import name="msg-markdown" src="./msg-markdown"></import>
 <template>
   <div class="wrapper">
     <div class="header">
@@ -31,7 +32,7 @@
 export default {
   data: {
     collapsed: false,
-    supportType: ['text', 'markdown'],
+    supportType: ['text', 'image', 'markdown'],
     input: '',
     msgs: [
       {
@@ -41,15 +42,13 @@ export default {
 长按可以复制文本内容。左滑显示删除。`
       },
       {
-        name: "Default", created_at: "5分钟前", type: "text",
-        text: `纯文本的效果。长文字需要自动换行。
-长文字需要自动换行。行间距24。
-长按可以复制文本内容。左滑显示删除。`
+        name: "推送Key的名字", created_at: "5分钟前", type: "markdown",
+        text: `<p>支持Markdown语法。比如可以插入<a href="https://www.baidu.com/">链接</a> ，
+点击后使用系统浏览器直接打开。</p>`
       },
       {
-        name: "推送Key的名字", created_at: "5分钟前", type: "markdown",
-        text: `支持Markdown语法。比如可以插入链接 ，
-点击后使用系统浏览器直接打开。`
+        name: "Default", created_at: "5分钟前", type: "image",
+        text: `https://wikipic.ftqq.com/wp-content/uploads/2021/08/jessy-smith-zFOm6KzA-7g-unsplash.jpg`
       },
     ],
   },
diff --git a/quickapp/src/pages/component/Message/msg-image.ux b/quickapp/src/pages/component/Message/msg-image.ux
new file mode 100644
index 0000000..3be0acc
--- /dev/null
+++ b/quickapp/src/pages/component/Message/msg-image.ux
@@ -0,0 +1,34 @@
+<import name="msg-header" src="./msg-header"></import>
+<template>
+  <div class="card">
+    <msg-header title="{{msg.name +' · '+ msg.created_at}}"></msg-header>
+    <image class="image" src="{{msg.text}}"></image>
+  </div>
+</template>
+
+<script>
+import clipboard from '@system.clipboard'
+export default {
+
+  props: ['msg'],
+
+  onInit() {
+    // console.log('msg-text',this.msg)
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/style.less';
+
+.card {
+  .flex-box-mixins(column, flex-start, center);
+  margin: 24px 0;
+  width: 100%;
+
+  .image {
+    width: 100%;
+    margin-top: 32px;
+  }
+}
+</style>
diff --git a/quickapp/src/pages/component/Message/msg-markdown.ux b/quickapp/src/pages/component/Message/msg-markdown.ux
new file mode 100644
index 0000000..da780b8
--- /dev/null
+++ b/quickapp/src/pages/component/Message/msg-markdown.ux
@@ -0,0 +1,44 @@
+<import name="msg-header" src="./msg-header"></import>
+<template>
+  <div class="card">
+    <msg-header title="{{msg.name +' · '+ msg.created_at}}"></msg-header>
+    <div class="markdown">
+      <richtext type="html" >{{msg.text}}</richtext>
+    </div>
+  </div>
+</template>
+
+<script>
+import clipboard from '@system.clipboard'
+export default {
+
+  props: ['msg'],
+
+  onInit() {
+    // console.log('msg-text',this.msg)
+  }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/styles/style.less';
+
+.card {
+  .flex-box-mixins(column, flex-start, center);
+  margin: 24px 0;
+  width: 100%;
+
+  .markdown {
+    width: 80%;
+    margin-top: 32px;
+    color: #535353;
+    font-size: 24px;
+    line-height: 48px;
+    padding: 24px;
+    border-width: 2px;
+    border-radius: 8px;
+    border-color: @primary-color;
+    background-color: #ffffff;
+  }
+}
+</style>