diff --git a/app/src/history/diff.ts b/app/src/history/diff.ts
index 59e130ef2..631e4c258 100644
--- a/app/src/history/diff.ts
+++ b/app/src/history/diff.ts
@@ -8,19 +8,21 @@ import {escapeAttr, escapeHtml} from "../util/escape";
 import * as dayjs from "dayjs";
 import {isMobile} from "../util/functions";
 import {App} from "../index";
+import {pathPosix} from "../util/pathName";
+import {renderAssetsPreview} from "../asset/renderAssets";
 
 const genItem = (data: [], data2?: { title: string, fileID: string }[]) => {
     if (!data || data.length === 0) {
         return `<li style="padding-left: 40px;" class="b3-list--empty">${window.siyuan.languages.emptyContent}</li>`;
     }
     let html = "";
-    data.forEach((item: { title: string, fileID: string }, index) => {
+    data.forEach((item: { title: string, fileID: string, path: string, hSize: string }, index) => {
         let id2 = "";
         if (data2) {
             id2 = `data-id2="${data2[index].fileID}"`;
         }
         html += `<li style="padding-left: 40px;" class="b3-list-item" ${id2} data-id="${item.fileID}">
-    <span class="b3-list-item__text" title="${escapeAttr(item.title)}">${escapeHtml(item.title)}</span>
+    <span class="b3-list-item__text" title="${escapeAttr(item.path)} ${item.hSize}">${escapeHtml(item.title)}</span>
 </li>`;
     });
     return html;
@@ -66,14 +68,22 @@ const renderCompare = (app: App, element: HTMLElement) => {
 
     fetchPost("/api/repo/openRepoSnapshotDoc", {id: element.getAttribute("data-id")}, (response) => {
         leftElement.classList.remove("fn__none");
-        const textElement = (leftElement.firstElementChild.nextElementSibling as HTMLTextAreaElement);
-        if (response.data.isLargeDoc) {
+        const textElement = leftElement.querySelector("textarea");
+        const type = pathPosix().extname(response.data.content).toLowerCase();
+        if (Constants.SIYUAN_ASSETS_IMAGE.concat(Constants.SIYUAN_ASSETS_AUDIO).concat(Constants.SIYUAN_ASSETS_VIDEO).includes(type)) {
+            textElement.previousElementSibling.innerHTML = renderAssetsPreview(response.data.content);
+            textElement.previousElementSibling.classList.remove("fn__none");
+            textElement.classList.add("fn__none");
+            leftElement.lastElementChild.classList.add("fn__none");
+        } else if (response.data.isLargeDoc) {
             textElement.value = response.data.content;
             textElement.classList.remove("fn__none");
             leftElement.lastElementChild.classList.add("fn__none");
+            textElement.previousElementSibling.classList.add("fn__none");
         } else {
             textElement.classList.add("fn__none");
             leftElement.lastElementChild.classList.remove("fn__none");
+            textElement.previousElementSibling.classList.add("fn__none");
             onGet({
                 data: response,
                 protyle: leftEditor.protyle,
@@ -86,14 +96,22 @@ const renderCompare = (app: App, element: HTMLElement) => {
     if (id2) {
         rightElement.classList.remove("fn__none");
         fetchPost("/api/repo/openRepoSnapshotDoc", {id: id2}, (response) => {
-            const textElement = (rightElement.firstElementChild.nextElementSibling as HTMLTextAreaElement);
-            if (response.data.isLargeDoc) {
+            const textElement = rightElement.querySelector("textarea");
+            const type = pathPosix().extname(response.data.content).toLowerCase();
+            if (Constants.SIYUAN_ASSETS_IMAGE.concat(Constants.SIYUAN_ASSETS_AUDIO).concat(Constants.SIYUAN_ASSETS_VIDEO).includes(type)) {
+                textElement.previousElementSibling.innerHTML = renderAssetsPreview(response.data.content);
+                textElement.previousElementSibling.classList.remove("fn__none");
+                textElement.classList.add("fn__none");
+                rightElement.lastElementChild.classList.add("fn__none");
+            } else if (response.data.isLargeDoc) {
                 textElement.value = response.data.content;
                 textElement.classList.remove("fn__none");
                 rightElement.lastElementChild.classList.add("fn__none");
+                textElement.previousElementSibling.classList.add("fn__none");
             } else {
                 textElement.classList.add("fn__none");
                 rightElement.lastElementChild.classList.remove("fn__none");
+                textElement.previousElementSibling.classList.add("fn__none");
                 onGet({
                     data: response,
                     protyle: rightEditor.protyle,
@@ -223,12 +241,14 @@ const genHTML = (left: string, right: string, dialog: Dialog, direct: string) =>
     <div class="fn__flex-1 fn__flex">
         <div class="fn__none fn__flex-1 fn__flex-column">
             <div class="history__date">${dayjs(response.data.left.created).format("YYYY-MM-DD HH:mm")}</div>
-            <textarea class="history__text fn__none fn__flex-1"></textarea>
+            <div class="history__asset"></div>
+            <textarea class="history__text fn__none fn__flex-1" readonly></textarea>
             <div class="fn__flex-1"></div>
         </div>
         <div class="fn__none fn__flex-1 fn__flex-column" style="border-left: 1px solid var(--b3-border-color);">
             <div class="history__date">${dayjs(response.data.right.created).format("YYYY-MM-DD HH:mm")}</div>
-            <textarea class="history__text fn__none fn__flex-1"></textarea>
+            <div class="history__asset"></div>
+            <textarea class="history__text fn__none fn__flex-1" readonly></textarea>
             <div class="fn__flex-1"></div>
         </div>
     </div>