diff --git a/app/src/asset/renderAssets.ts b/app/src/asset/renderAssets.ts
index 9a41cc87f..237f6b688 100644
--- a/app/src/asset/renderAssets.ts
+++ b/app/src/asset/renderAssets.ts
@@ -3,6 +3,7 @@ import {Constants} from "../constants";
 import {getAllModels} from "../layout/getAll";
 /// #endif
 import {pathPosix} from "../util/pathName";
+import * as dayjs from "dayjs";
 
 export const renderAssetsPreview = (pathString: string) => {
     if (!pathString) {
@@ -44,3 +45,21 @@ export const pdfResize = () => {
     });
     /// #endif
 };
+
+export const genAssetHTML = (type: string, pathString: string, imgName: string, linkName: string) => {
+    let html = ""
+    if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
+        html = `<div data-node-id="${Lute.NewNodeID()}" data-type="NodeAudio" class="iframe" updated="${dayjs().format("YYYYMMDDHHmmss")}"><div class="iframe-content"><audio controls="controls" src="${pathString}" data-src="${pathString}"></audio>${Constants.ZWSP}</div><div class="protyle-attr" contenteditable="false">${Constants.ZWSP}</div></div>`;
+    } else if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
+        let netHTML = ""
+        if (!pathString.startsWith("assets/")) {
+            netHTML = '<span class="img__net"><svg><use xlink:href="#iconLanguage"></use></svg></span>'
+        }
+        html = `<span contenteditable="false" data-type="img" class="img"><span> </span><span><span class="protyle-action protyle-icons"><span class="protyle-icon protyle-icon--only"><svg class="svg"><use xlink:href="#iconMore"></use></svg></span></span><img src="${pathString}" data-src="${pathString}" alt="${imgName}" /><span class="protyle-action__drag"></span>${netHTML}<span class="protyle-action__title"></span></span><span> </span></span>`;
+    } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
+        html = `<div data-node-id="${Lute.NewNodeID()}" data-type="NodeVideo" class="iframe" updated="${dayjs().format("YYYYMMDDHHmmss")}"><div class="iframe-content">${Constants.ZWSP}<video controls="controls" src="${pathString}" data-src="${pathString}"></video><span class="protyle-action__drag" contenteditable="false"></span></div><div class="protyle-attr" contenteditable="false">${Constants.ZWSP}</div></div>`;
+    } else {
+        html = `<span data-type="a" data-href="${pathString}">${linkName}</span>`;
+    }
+    return html;
+}
diff --git a/app/src/menus/protyle.ts b/app/src/menus/protyle.ts
index 204a50a0b..526fe34f9 100644
--- a/app/src/menus/protyle.ts
+++ b/app/src/menus/protyle.ts
@@ -754,7 +754,7 @@ export const linkMenu = (protyle: IProtyle, linkElement: HTMLElement, focusText
                 html = nodeElement.outerHTML;
             });
             inputElement.addEventListener("compositionend", () => {
-                linkElement.innerHTML = Lute.EscapeHTMLStr(inputElement.value) || "";
+                linkElement.innerHTML = Lute.EscapeHTMLStr(inputElement.value || "");
             });
             inputElement.addEventListener("input", (event: KeyboardEvent) => {
                 if (!event.isComposing) {
diff --git a/app/src/protyle/hint/extend.ts b/app/src/protyle/hint/extend.ts
index f3756561b..dac6483d2 100644
--- a/app/src/protyle/hint/extend.ts
+++ b/app/src/protyle/hint/extend.ts
@@ -17,6 +17,7 @@ import {updateListOrder} from "../wysiwyg/list";
 import {escapeHtml} from "../../util/escape";
 import {zoomOut} from "../../menus/protyle";
 import {hideElements} from "../ui/hideElements";
+import {genAssetHTML} from "../../asset/renderAssets";
 
 export const hintSlash = (key: string, protyle: IProtyle) => {
     const allList: IHintData[] = [{
@@ -428,17 +429,7 @@ export const hintRenderAssets = (value: string, protyle: IProtyle) => {
     focusByRange(protyle.toolbar.range);
     const type = pathPosix().extname(value).toLowerCase();
     const filename = value.startsWith("assets/") ? getAssetName(value) : value;
-    let fileMD = "";
-    if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
-        fileMD += `<audio controls="controls" src="${value}"></audio>`;
-    } else if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
-        fileMD += `![${filename}](${value})`;
-    } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
-        fileMD += `<video controls="controls" src="${value}"></video>`;
-    } else {
-        fileMD += `[${value.startsWith("assets/") ? filename + type : value}](${value})`;
-    }
-    insertHTML(protyle.lute.SpinBlockDOM(fileMD), protyle);
+    insertHTML(genAssetHTML(type, value, filename, value.startsWith("assets/") ? filename + type : value), protyle);
     hideElements(["util"], protyle);
 };
 
diff --git a/app/src/protyle/upload/index.ts b/app/src/protyle/upload/index.ts
index 2b13cd6ec..8e88fa866 100644
--- a/app/src/protyle/upload/index.ts
+++ b/app/src/protyle/upload/index.ts
@@ -5,6 +5,7 @@ import {destroy} from "../util/destroy";
 import {fetchPost} from "../../util/fetch";
 import {getEditorRange} from "../util/selection";
 import {pathPosix} from "../../util/pathName";
+import {genAssetHTML} from "../../asset/renderAssets";
 
 export class Upload {
     public element: HTMLElement;
@@ -102,16 +103,9 @@ const genUploadedLabel = (responseText: string, protyle: IProtyle) => {
         const path = response.data.succMap[key];
         const type = pathPosix().extname(key).toLowerCase();
         const filename = protyle.options.upload.filename(key);
-        if (Constants.SIYUAN_ASSETS_AUDIO.includes(type)) {
-            succFileText += `<audio controls="controls" src="${path}"></audio>`;
-        } else if (Constants.SIYUAN_ASSETS_IMAGE.includes(type)) {
-            succFileText += `![${filename.substring(0, filename.length - type.length)}](${path})`;
-        } else if (Constants.SIYUAN_ASSETS_VIDEO.includes(type)) {
-            succFileText += `<video controls="controls" src="${path}"></video>`;
-        } else {
-            succFileText += `[${filename}](${path})`;
-        }
-        if (keys.length - 1 !== index) {
+        succFileText += genAssetHTML(type, path, filename.substring(0, filename.length - type.length), filename)
+        if (!Constants.SIYUAN_ASSETS_AUDIO.includes(type) && !Constants.SIYUAN_ASSETS_VIDEO.includes(type) &&
+            keys.length - 1 !== index) {
             succFileText += "\n";
         }
     });
@@ -121,10 +115,10 @@ const genUploadedLabel = (responseText: string, protyle: IProtyle) => {
         range.setEndAfter(range.startContainer.parentElement);
         range.collapse(false);
     }
-    insertHTML(protyle.lute.SpinBlockDOM(succFileText), protyle);
+    insertHTML(succFileText, protyle);
 };
 
-export const uploadLocalFiles = (files: string[], protyle: IProtyle, isUpload:boolean) => {
+export const uploadLocalFiles = (files: string[], protyle: IProtyle, isUpload: boolean) => {
     const msgId = showMessage(window.siyuan.languages.uploading, 0);
     fetchPost("/api/asset/insertLocalAssets", {
         assetPaths: files,