diff --git a/server/src/main/resources/web/picture.ftl b/server/src/main/resources/web/picture.ftl index e6b3905d..94e52795 100644 --- a/server/src/main/resources/web/picture.ftl +++ b/server/src/main/resources/web/picture.ftl @@ -77,8 +77,14 @@ button: false, backdrop: false, loop: true, - // #787:
没有 DOM 的 src 属性,Viewer.js 用 image.src 取标题会得到 undefined; - // 改为从 data-original-url 派生标题文件名(该属性在元素克隆时会被保留) + // #787: Viewer.js 的 title 回调拿到的 `image` 是它内部新建的 (见 viewer.min.js + // 的 view(): `var image = document.createElement('img')`),并不是原始
。Viewer + // 在构建缩略图与查看大图时只透传 `inheritedAttributes` 里的属性,而默认值不含 + // data-original-url,所以若不显式加入,getImageNameFromOriginalUrl 在该 上永远 + // getAttribute('data-original-url') == null,标题会恒为 'image'(修复形同虚设)。 + // 因此必须把 data-original-url 加进 inheritedAttributes,让原始 URL 随缩略图→大图透传。 + inheritedAttributes: ['crossOrigin', 'decoding', 'isMap', 'loading', 'referrerPolicy', 'sizes', 'srcset', 'useMap', 'data-original-url'], + // 从 data-original-url 派生标题文件名(避免受反代 / CORS 代理 URL 影响) title: function (image, imageData) { return getImageNameFromOriginalUrl(image); } diff --git a/server/src/test/java/cn/keking/PictureFilePreviewTests.java b/server/src/test/java/cn/keking/PictureFilePreviewTests.java index 9885b634..9be91c44 100644 --- a/server/src/test/java/cn/keking/PictureFilePreviewTests.java +++ b/server/src/test/java/cn/keking/PictureFilePreviewTests.java @@ -14,7 +14,12 @@ import static org.junit.jupiter.api.Assertions.assertTrue; * * 根因:v4.3.0 之后模板把图片元素从 <img> 改成 <div src>,而 HTMLDivElement 没有 DOM 的 * src 属性,Viewer.js 用 image.src 取标题得到 undefined,导致标题为空。修复方式是在 Viewer 初始化时 - * 配置 title 函数,从 data-original-url 派生文件名(该属性在元素克隆时会被保留)。 + * 配置 title 函数,从 data-original-url 派生文件名。 + * + * 关键点(已核对 viewer.min.js 源码):title 回调拿到的 `image` 是 Viewer 内部新建的 <img> + * (view(): `var image = document.createElement('img')`),不是原始 <div>。Viewer 在构建缩略图 + * 与查看大图时只透传 `inheritedAttributes` 里的属性,默认值不含 data-original-url,所以必须把 + * data-original-url 加进 inheritedAttributes,否则 title 函数永远读不到它、标题恒为 'image'。 */ public class PictureFilePreviewTests { @@ -35,6 +40,13 @@ public class PictureFilePreviewTests { () -> "picture.ftl must derive the title from data-original-url (see #787)"); assertTrue(pictureTemplate.contains("getAttribute('data-original-url')"), () -> "title derivation must read data-original-url attribute (see #787)"); + + // 关键:Viewer.js 只会把 inheritedAttributes 透传到 title 回调拿到的 上,默认值不含 + // data-original-url。若不显式加入,title 函数读不到原始 URL、标题恒为 'image'(修复形同虚设)。 + assertTrue(pictureTemplate.contains("inheritedAttributes"), + () -> "picture.ftl must set Viewer inheritedAttributes so data-original-url reaches the title image (see #787)"); + assertTrue(pictureTemplate.contains("'data-original-url'"), + () -> "Viewer inheritedAttributes must include data-original-url (see #787)"); } private String readResource(String resourcePath) throws IOException {