diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts
index 7e26cedf2..12f4374b7 100644
--- a/app/src/emoji/index.ts
+++ b/app/src/emoji/index.ts
@@ -26,7 +26,7 @@ export const unicode2Emoji = (unicode: string, className = "", needSpan = false,
     }
     let emoji = "";
     if (unicode.startsWith("api/icon/getDynamicIcon")) {
-        emoji = `<img class="${className}" ${lazy ? "data-" : ""}src="${unicode}"/>`;
+        emoji = `<img class="${className}" ${lazy ? "data-" : ""}src="${unicode}" data-src="${unicode}"/>`;
     } else if (unicode.indexOf(".") > -1) {
         emoji = `<img class="${className}" ${lazy ? "data-" : ""}src="/emojis/${unicode}"/>`;
     } else {
diff --git a/app/src/protyle/render/av/action.ts b/app/src/protyle/render/av/action.ts
index 9fdbb45b8..cf1f1280b 100644
--- a/app/src/protyle/render/av/action.ts
+++ b/app/src/protyle/render/av/action.ts
@@ -295,7 +295,7 @@ export const avClick = (protyle: IProtyle, event: MouseEvent & { target: HTMLEle
             return true;
         } else if (target.classList.contains("av__cellassetimg")) {
             previewAttrViewImages(
-                removeCompressURL((target as HTMLImageElement).getAttribute("src")),
+                (target as HTMLImageElement).getAttribute("data-src") || removeCompressURL((target as HTMLImageElement).getAttribute("src")),
                 blockElement.getAttribute("data-av-id"),
                 blockElement.getAttribute(Constants.CUSTOM_SY_AV_VIEW),
                 (blockElement.querySelector('[data-type="av-search"]') as HTMLInputElement)?.value.trim() || ""
diff --git a/app/src/protyle/render/av/asset.ts b/app/src/protyle/render/av/asset.ts
index db0dd4155..a04a54833 100644
--- a/app/src/protyle/render/av/asset.ts
+++ b/app/src/protyle/render/av/asset.ts
@@ -61,7 +61,7 @@ export const getAssetHTML = (cellElements: HTMLElement[]) => {
         let contentHTML;
         if (item.type === "image") {
             contentHTML = `<span data-type="openAssetItem" class="fn__flex-1 ariaLabel" aria-label="${item.content}">
-    <img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${getCompressURL(item.content)}"/>
+    <img style="max-height: 180px;max-width: 360px;border-radius: var(--b3-border-radius);margin: 4px 0;" src="${getCompressURL(item.content)}" data-src="${item.content}"/>
 </span>`;
         } else {
             contentHTML = `<span data-type="openAssetItem" class="fn__ellipsis b3-menu__label ariaLabel" aria-label="${escapeAttr(item.content)}" style="max-width: 360px">${item.name || item.content}</span>`;
diff --git a/app/src/protyle/render/av/blockAttr.ts b/app/src/protyle/render/av/blockAttr.ts
index 58920931e..82f810d84 100644
--- a/app/src/protyle/render/av/blockAttr.ts
+++ b/app/src/protyle/render/av/blockAttr.ts
@@ -16,7 +16,7 @@ import {webUtils} from "electron";
 /// #endif
 import {isBrowser} from "../../../util/functions";
 import {Constants} from "../../../constants";
-import {getCompressURL} from "../../../util/image";
+import {getCompressURL, removeCompressURL} from "../../../util/image";
 
 const genAVRollupHTML = (value: IAVCellValue) => {
     let html = "";
@@ -90,7 +90,7 @@ export const genAVValueHTML = (value: IAVCellValue) => {
         case "mAsset":
             value.mAsset?.forEach(item => {
                 if (item.type === "image") {
-                    html += `<img loading="lazy" class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${getCompressURL(item.content)}">`;
+                    html += `<img loading="lazy" class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${getCompressURL(item.content)}" data-src="${item.content}">`;
                 } else {
                     html += `<span class="b3-chip b3-chip--middle av__celltext--url ariaLabel" aria-label="${escapeAttr(item.content)}" data-name="${escapeAttr(item.name)}" data-url="${escapeAttr(item.content)}">${item.name || item.content}</span>`;
                 }
@@ -491,7 +491,7 @@ const openEdit = (protyle: IProtyle, element: HTMLElement, event: MouseEvent) =>
                     protyle,
                     cellElements: [target.parentElement],
                     blockElement: hasClosestBlock(target) as HTMLElement,
-                    content: target.tagName === "IMG" ? target.getAttribute("src") : target.getAttribute("data-url"),
+                    content: target.tagName === "IMG" ? (target.getAttribute("data-src") || target.getAttribute("src")) : target.getAttribute("data-url"),
                     type: target.tagName === "IMG" ? "image" : "file",
                     name: target.tagName === "IMG" ? "" : target.getAttribute("data-name"),
                     index,
@@ -499,7 +499,7 @@ const openEdit = (protyle: IProtyle, element: HTMLElement, event: MouseEvent) =>
                 });
             } else {
                 if (target.tagName === "IMG") {
-                    previewImages([target.getAttribute("src")]);
+                    previewImages([target.getAttribute("data-src") || removeCompressURL(target.getAttribute("src"))]);
                 } else {
                     openLink(protyle, target.dataset.url, event, event.ctrlKey || event.metaKey);
                 }
diff --git a/app/src/protyle/render/av/cell.ts b/app/src/protyle/render/av/cell.ts
index 866a8759e..e01297743 100644
--- a/app/src/protyle/render/av/cell.ts
+++ b/app/src/protyle/render/av/cell.ts
@@ -131,7 +131,7 @@ export const genCellValueByElement = (colType: TAVCol, cellElement: HTMLElement)
             const isImg = item.classList.contains("av__cellassetimg");
             mAsset.push({
                 type: isImg ? "image" : "file",
-                content: isImg ? removeCompressURL(item.getAttribute("src")) : item.getAttribute("data-url"),
+                content: isImg ? (item.getAttribute("data-src") || removeCompressURL(item.getAttribute("src"))) : item.getAttribute("data-url"),
                 name: isImg ? "" : item.getAttribute("data-name")
             });
         });
@@ -989,7 +989,7 @@ export const renderCell = (cellValue: IAVCellValue, rowIndex = 0, showIcon = tru
     } else if (cellValue.type === "mAsset") {
         cellValue?.mAsset?.forEach((item) => {
             if (item.type === "image") {
-                text += `<img loading="lazy" class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${getCompressURL(item.content)}">`;
+                text += `<img loading="lazy" class="av__cellassetimg ariaLabel" aria-label="${item.content}" src="${getCompressURL(item.content)}" data-src="${item.content}">`;
             } else {
                 text += `<span class="b3-chip av__celltext--url ariaLabel" aria-label="${escapeAttr(item.content)}" data-name="${escapeAttr(item.name)}" data-url="${escapeAttr(item.content)}">${item.name || item.content}</span>`;
             }
diff --git a/app/src/protyle/wysiwyg/index.ts b/app/src/protyle/wysiwyg/index.ts
index 3993ce33d..bc9e171c6 100644
--- a/app/src/protyle/wysiwyg/index.ts
+++ b/app/src/protyle/wysiwyg/index.ts
@@ -2577,7 +2577,7 @@ export class WYSIWYG {
 
         this.element.addEventListener("dblclick", (event: MouseEvent & { target: HTMLElement }) => {
             if (event.target.tagName === "IMG" && !event.target.classList.contains("emoji")) {
-                previewDocImage((event.target as HTMLElement).getAttribute("src"), protyle.block.rootID);
+                previewDocImage((event.target as HTMLElement).getAttribute("data-src") || (event.target as HTMLElement).getAttribute("src"), protyle.block.rootID);
                 return;
             }
         });
@@ -3064,7 +3064,7 @@ export class WYSIWYG {
                         const oldHTML = nodeElement.outerHTML;
                         let emojiHTML;
                         if (unicode.startsWith("api/icon/getDynamicIcon")) {
-                            emojiHTML = `<img class="callout-img" src="${unicode}"/>`;
+                            emojiHTML = `<img class="callout-img" src="${unicode}" data-src="${unicode}"/>`;
                         } else if (unicode.indexOf(".") > -1) {
                             emojiHTML = `<img class="callout-img" src="/emojis/${unicode}">`;
                         } else {
@@ -3096,7 +3096,7 @@ export class WYSIWYG {
                         const oldHTML = nodeElement.outerHTML;
                         let emojiHTML;
                         if (unicode.startsWith("api/icon/getDynamicIcon")) {
-                            emojiHTML = `<img class="emoji" src="${unicode}"/>`;
+                            emojiHTML = `<img class="emoji" src="${unicode}" data-src="${unicode}"/>`;
                         } else if (unicode.indexOf(".") > -1) {
                             const emojiList = unicode.split(".");
                             emojiHTML = `<img alt="${emojiList[0]}" class="emoji" src="/emojis/${unicode}" title="${emojiList[0]}">`;