🎨 https://github.com/siyuan-note/siyuan/issues/13388

app/src/assets/scss/viewerjs/_viewer.scss

@@ -244,11 +244,18 @@
     display: inline-block;
     font-size: 12px;
     line-height: 1.2;
-    margin: 0 5% 5px;
+    margin: 5px 5%;
     max-width: 90%;
+    min-height: 14px;
+    opacity: 0.8;
     overflow: hidden;
     text-overflow: ellipsis;
+    transition: opacity 0.15s;
     white-space: nowrap;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   &-button {

app/src/protyle/preview/image.ts

@@ -3,46 +3,46 @@ import {addScript} from "../util/addScript";
 import {fetchPost} from "../../util/fetch";
 
 export const previewImage = (src: string) => {
-    addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.10.4`, "protyleViewerScript").then(() => {
-            const imagesElement = document.createElement("ul");
-            imagesElement.innerHTML = `<li><img src="${src}"></li>`;
-            window.siyuan.viewer = new Viewer(imagesElement, {
-                title: [1, (image: HTMLImageElement, imageData: IObject) => {
-                    let name = image.alt;
-                    if (!name) {
-                        name = image.src.substring(image.src.lastIndexOf("/") + 1);
-                    }
-                    name = name.substring(0, name.lastIndexOf(".")).replace(/-\d{14}-\w{7}$/, "");
-                    return `${name} [${imageData.naturalWidth} × ${imageData.naturalHeight}]`;
-                }],
-                button: false,
-                transition: false,
-                hidden: function () {
+    addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
+        const imagesElement = document.createElement("ul");
+        imagesElement.innerHTML = `<li><img src="${src}"></li>`;
+        window.siyuan.viewer = new Viewer(imagesElement, {
+            title: [1, (image: HTMLImageElement, imageData: IObject) => {
+                let name = image.alt;
+                if (!name) {
+                    name = image.src.substring(image.src.lastIndexOf("/") + 1);
+                }
+                name = name.substring(0, name.lastIndexOf(".")).replace(/-\d{14}-\w{7}$/, "");
+                return `${name} [${imageData.naturalWidth} × ${imageData.naturalHeight}]`;
+            }],
+            button: false,
+            transition: false,
+            hidden: function () {
+                window.siyuan.viewer.destroy();
+            },
+            toolbar: {
+                zoomIn: true,
+                zoomOut: true,
+                oneToOne: true,
+                reset: true,
+                prev: true,
+                play: true,
+                next: true,
+                rotateLeft: true,
+                rotateRight: true,
+                flipHorizontal: true,
+                flipVertical: true,
+                close: function () {
                     window.siyuan.viewer.destroy();
                 },
-                toolbar: {
-                    zoomIn: true,
-                    zoomOut: true,
-                    oneToOne: true,
-                    reset: true,
-                    prev: true,
-                    play: true,
-                    next: true,
-                    rotateLeft: true,
-                    rotateRight: true,
-                    flipHorizontal: true,
-                    flipVertical: true,
-                    close: function () {
-                        window.siyuan.viewer.destroy();
-                    },
-                },
-            });
-            window.siyuan.viewer.show();
+            },
+        });
+        window.siyuan.viewer.show();
     });
 };
 
 export const previewDocImage = (src: string, id: string) => {
-    addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.10.4`, "protyleViewerScript").then(() => {
+    addScript(`${Constants.PROTYLE_CDN}/js/viewerjs/viewer.js?v=1.11.7`, "protyleViewerScript").then(() => {
         fetchPost("/api/asset/getDocImageAssets", {id}, (response) => {
             const imagesElement = document.createElement("ul");
             let html = "";

app/src/protyle/preview/index.ts

@@ -113,7 +113,7 @@ export class Preview {
                     }
                     break;
                 } else if (target.tagName === "IMG") {
-                    previewDocImage((event.target as HTMLImageElement).src, protyle.block.rootID);
+                    previewDocImage((event.target as HTMLElement).getAttribute("src"), protyle.block.rootID);
                     event.stopPropagation();
                     event.preventDefault();
                     break;

app/src/protyle/wysiwyg/index.ts

@@ -2150,7 +2150,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 HTMLImageElement).src, protyle.block.rootID);
+                previewDocImage((event.target as HTMLElement).getAttribute("src"), protyle.block.rootID);
                 return;
             }
         });