terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fall back to file icon when document thumbnail fails to load

Browse Source 
Render the 52x52 preview with an empty alt and an onError handler, so a
broken thumbnail no longer shows the browser's broken-image box (which
leaked the raw filename) — it falls back to the file-type icon instead.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-29 13:08:16 +08:00
parent b252fa113d
commit 4464e6fdc5
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/messageStream/bubbles/FileDocBubble.tsx
View File

@@ -19,6 +19,7 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename }); const { Icon, color } = fileIcon({ mime: att.mime, filename: att.filename });
const displayFilename = filenameWithExtension(att.filename, att.mime); const displayFilename = filenameWithExtension(att.filename, att.mime);
const [isDownloading, setIsDownloading] = useState(false); const [isDownloading, setIsDownloading] = useState(false);
const [previewFailed, setPreviewFailed] = useState(false);
const handleDownload = async () => { const handleDownload = async () => {
if (isDownloading) return; if (isDownloading) return;
@@ -39,11 +40,12 @@ function AttachmentRow({ postId, att }: { postId: string; att: Attachment }) {
return ( return (
<div className="group flex h-[52px] items-center gap-3"> <div className="group flex h-[52px] items-center gap-3">
{previewUrl ? ( {previewUrl && !previewFailed ? (
<img <img
src={previewUrl} src={previewUrl}
alt={displayFilename} alt=""
loading="lazy" loading="lazy"
onError={() => setPreviewFailed(true)}
className="h-[52px] w-[52px] shrink-0 rounded-full object-cover" className="h-[52px] w-[52px] shrink-0 rounded-full object-cover"
/> />
) : ( ) : (