mirror of
https://gitee.com/kekingcn/file-online-preview.git
synced 2026-11-11 13:50:44 +00:00
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:
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 回调拿到的 <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 {
|
||||
|
||||
Reference in New Issue
Block a user