Skip to content

fix(#787): show filename in image preview title via data-original-url - #798

Merged
klboke merged 4 commits into
kekingcn:masterfrom
wylovelyi:fix/issue-787-image-preview-filename
Oct 8, 2026
Merged

klboke merged 4 commits into
kekingcn:masterfrom
wylovelyi:fix/issue-787-image-preview-filename

Conversation

@wylovelyi

@wylovelyi wylovelyi commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Fixes #787.

Direct image previews use hidden <div src> elements, so Viewer's default title cannot obtain a filename from the DOM src property. Derive the title from the selected original element's data-original-url, stripping query/fragment parts before extracting the filename.

The callback reads this.images[this.index]: Viewer replaces data-original-url on its internal image clones with the actual fetch URL, which is getCorsFile?... when kkagent=true. Reading the original element preserves the source filename in both direct and proxy previews.

Validation:

  • PictureFilePreviewTests passes locally.
  • Browser checks against the bundled Viewer confirm photo.png with kkagent=false and kkagent=true; the previous proxy case displayed getCorsFile.
  • Added picture-title.spec.ts to verify the rendered title through /onlinePreview in both modes.

…e preview shows the filename (was empty for <div src>)
…e preview shows the filename (was empty for <div src>)
@wylovelyi

Copy link
Copy Markdown
Contributor Author

@klboke 你好,这个 PR 在图片预览标题里通过 data-original-url 显示文件名(#787)。准备好 review 了,谢谢!

@wylovelyi

Copy link
Copy Markdown
Contributor Author

Pushed a fix after verifying the original approach against the bundled viewer.min.js (in static/js/viewer.min.js).

Root cause (confirmed by reading the source): the title(image, imageData) callback does NOT receive the original <div>. Viewer.js creates a brand-new <img> internally (view(): var image = document.createElement('img')) and passes that to the callback. Viewer only forwards the attributes listed in its inheritedAttributes option when building that <img>, and data-original-url is NOT in the default list (['crossOrigin','decoding','isMap','loading','referrerPolicy','sizes','srcset','useMap']). So the previous getImageNameFromOriginalUrl(image) always read null and the title stayed 'image' — the fix was a no-op at runtime (exactly the review concern).

Fix: add 'data-original-url' to the Viewer inheritedAttributes so the original URL is forwarded from the thumbnail <img> to the title <img>. The existing getImageNameFromOriginalUrl now resolves the real filename (not the CORS-proxy URL). Also updated PictureFilePreviewTests to assert inheritedAttributes includes data-original-url so this regression cannot silently return.

@klboke klboke left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed the latest head 86c2b8d, including the follow-up proxy fix.

The bundled Viewer rewrites data-original-url on its image clones, so copying that attribute through inheritedAttributes still showed getCorsFile when kkagent=true. The callback now reads the selected original element via this.images[this.index], retaining the original filename in both modes. I reproduced the previous failure and verified the corrected title in a real browser against the bundled Viewer.

Validation: PictureFilePreviewTests passes locally; the new browser E2E checks for direct and proxy image titles both pass. Linux/Windows/macOS packaging and the full PR E2E job are green on this exact head. No remaining blockers.

@klboke
klboke merged commit 1dfad88 into kekingcn:master Oct 8, 2026
4 checks passed
wylovelyi and others added 2 commits October 8, 2026 10:00
…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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ISSUE] v5.0.2 直接图片预览不显示文件名

2 participants