diff --git a/src/App.vue b/src/App.vue
index e27acb7bed4d5a3a2d2375006dfeffb040b48222..82e61a379f4f55b92050b4922dedfdbca271ddbd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -86,7 +86,7 @@ import markdownHeader from "./components/header/md-header";
 import markdownFooter from "./components/footer/md-footer";
 import markdownEditor from "./components/content/md-textarea";
 import markdownPreview from "./components/content/md-preview";
-import { formatText, checktUrl } from "@/assets/js/utils";
+import { formatText, checktUrl, getLinkTitle } from "@/assets/js/utils";
 export default {
   components: {
     markdownHeader,
@@ -368,10 +368,16 @@ export default {
           const linkEl = vDom.querySelector("#" + item.id);
           linkEl.className = "md_link_card";
           linkEl.setAttribute("target", "_blank");
+          const title = getLinkTitle(linkEl);
           linkEl.innerHTML = `
-          <span class="md_link_title">${item.title}</span>
-          <span class="md_link_desc">${item.desc}</span>
-          <span class="md_link_url">${item.url}</span>
+          <span class="md_link_title">${title || item.title}</span>
+          <span class="md_flex_card">
+            <img class="md_link_img" src="${item.img}" />
+            <span class="flex-1">
+              <span class="md_link_desc">${item.desc}</span>
+              <span class="md_link_url">${item.url}</span>
+            </span>
+          </span>
           `;
         });
         // return vDom.innerHTML;
diff --git a/src/assets/js/utils.js b/src/assets/js/utils.js
index e8ed8062b604d5b322ac382753dd08b70f3014a2..1d4474f17efbd2349b85a3e54e506b759c031889 100644
--- a/src/assets/js/utils.js
+++ b/src/assets/js/utils.js
@@ -330,3 +330,8 @@ export function getLinkTags(id, html) {
   );
   return { vDom: virtualDom, links };
 }
+
+export function getLinkTitle(linkEl) {
+  const title = linkEl.innerText;
+  return /^http/.test(title) ? "" : title;
+}
diff --git a/src/assets/style/card.less b/src/assets/style/card.less
index e72c7ec1df19240731510d1c323acd431ec0cab6..34f2d836bb2d773aa70c0a590cf8e92237afeb79 100644
--- a/src/assets/style/card.less
+++ b/src/assets/style/card.less
@@ -6,12 +6,16 @@
   border: 1px solid var(--md-editor-border-color);
   background: #f5f6f7;
   transition: border 0.3s;
+  max-width: 800px;
   &:hover {
     border: 1px solid var(--md-editor-border-color-active);
   }
   span {
     color: var(--md-editor-text-color-active);
-    display: block;
+  }
+  .md_link_img {
+    height: 64px;
+    margin-right: 16px;
   }
   .md_link_title {
     font-size: 16px;
@@ -36,5 +40,9 @@
   .md_link_url {
     font-size: 12px;
     color: var(--md-editor-border-color-active);
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
   }
 }
diff --git a/src/assets/style/global.less b/src/assets/style/global.less
index eac9e7414fe672cab9995f750fd2a0a1bf9a5a67..e953647607a1d4763f44fa3df39673df24ce67c5 100644
--- a/src/assets/style/global.less
+++ b/src/assets/style/global.less
@@ -1,7 +1,7 @@
 @import "./variable.less";
 @import "./iconfont.less";
 @import "./markdown.less";
-@import './card.less';
+@import "./card.less";
 
 * {
   padding: 0;
@@ -47,4 +47,13 @@ textarea {
 // img {
 //   display: block;
 //   margin: 0;
-// }
\ No newline at end of file
+// }
+
+.md_flex_card {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .flex-1 {
+    flex: 1;
+  }
+}