fix(#787): make the image-preview title actually derive from the original URL

Verified against the bundled viewer.min.js: the `title(image, imageData)` callback
receives the <img> element Viewer.js creates internally (view(): `var image =
document.createElement('img')`), NOT the original <div>. Viewer only forwards the
attributes listed in `inheritedAttributes` (default: crossOrigin, decoding, isMap,
loading, referrerPolicy, sizes, srcset, useMap) when building that <img>, and
`data-original-url` is not in that list. So the previous title function always read
null and the title stayed 'image' -- the fix was a no-op at runtime.

Fix: add `data-original-url` to Viewer's `inheritedAttributes` so the original URL is
forwarded from the thumbnail <img> to the title <img>, letting
`getImageNameFromOriginalUrl` return the real filename (and not the CORS-proxy URL).

Also updates PictureFilePreviewTests to assert `inheritedAttributes` is configured
with data-original-url, locking the regression.
This commit is contained in:
wylovelyi
2026-09-27 10:00:00 +00:00
parent 80b13dacba
commit 6b948fa675
2 changed files with 21 additions and 3 deletions

View File

@@ -77,8 +77,14 @@
button: false,
backdrop: false,
loop: true,
// #787: <div> 没有 DOM 的 src 属性,Viewer.js 用 image.src 取标题会得到 undefined;
// 改为从 data-original-url 派生标题文件名(该属性在元素克隆时会被保留)
// #787: Viewer.js 的 title 回调拿到的 `image` 是它内部新建的 <img>(见 viewer.min.js
// 的 view(): `var image = document.createElement('img')`),并不是原始 <div>。Viewer
// 在构建缩略图与查看大图时只透传 `inheritedAttributes` 里的属性,而默认值不含
// data-original-url,所以若不显式加入,getImageNameFromOriginalUrl 在该 <img> 上永远
// 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);
}

View File

@@ -14,7 +14,12 @@ import static org.junit.jupiter.api.Assertions.assertTrue;
*
* 根因:v4.3.0 之后模板把图片元素从 &lt;img&gt; 改成 &lt;div src&gt;,而 HTMLDivElement 没有 DOM 的
* src 属性,Viewer.js 用 image.src 取标题得到 undefined,导致标题为空。修复方式是在 Viewer 初始化时
* 配置 title 函数,从 data-original-url 派生文件名(该属性在元素克隆时会被保留)。
* 配置 title 函数,从 data-original-url 派生文件名。
*
* 关键点(已核对 viewer.min.js 源码):title 回调拿到的 `image` 是 Viewer 内部新建的 &lt;img&gt;
* (view(): `var image = document.createElement('img')`),不是原始 &lt;div&gt;。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 回调拿到的 <img> 上,默认值不含
// 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 {