PR #15564: app/ui: use data URLs for image thumbnails to fix first-render loading

• Repository: ollama/ollama
• Author: matteocelani
• State: open | merged: False
• Link: https://github.com/ollama/ollama/pull/15564

Description (problem / solution / changelog)

When opening a chat with user-uploaded images, the thumbnails don't render on first load. They appear only after sending a new message and receiving a response.

The ImageThumbnail component used blob URLs (URL.createObjectURL) with a useMemo keyed on the entire image object. When React Query re-fetches chat data, it recreates the attachment objects with new references — even though the content is identical. This causes useMemo to recalculate and create a new blob URL, while the cleanup effect revokes the previous one before the <img> has finished loading it.

Replaced blob URLs with base64 data URLs. Data URLs are immutable strings that don't need lifecycle management — no useEffect cleanup, no revocation, no race condition. The useMemo is now keyed on image.filename and image.data.length (primitives), so it only recalculates when the attachment changes. The tradeoff is ~33% higher memory usage vs blob URLs due to base64 encoding, but chat thumbnails are small (16x16 rem) so the impact is negligible.

Changes:

• app/ui/app/src/components/ImageThumbnail.tsx: blob URL → data URL, removed useEffect cleanup, stabilized useMemo dependencies

Fixes #15563

Changed files

• app/ui/app/src/components/ImageThumbnail.tsx (modified, +31/-63)