github-starred/ollama
2
0
Fork 0
mirror of https://github.com/ollama/ollama.git synced 2026-05-07 00:22:43 -05:00
Code Issues 14.5k Packages Projects Releases 120 Wiki Activity

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

New Issue
Open
opened 2026-05-05 10:10:22 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-05-05 10:10:22 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/ollama/ollama/pull/15564
Author: @matteocelani
Created: 4/13/2026
Status: 🔄 Open

Base: main ← Head: fix/image-first-render-15563

📝 Commits (1)

  • e1bbb1a app/ui: use data URLs for image thumbnails to fix first-render loading

📊 Changes

1 file changed (+31 additions, -63 deletions)

View changed files

📝 app/ui/app/src/components/ImageThumbnail.tsx (+31 -63)

📄 Description

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

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/ollama/ollama/pull/15564 **Author:** [@matteocelani](https://github.com/matteocelani) **Created:** 4/13/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `fix/image-first-render-15563` --- ### 📝 Commits (1) - [`e1bbb1a`](https://github.com/ollama/ollama/commit/e1bbb1a5433440c1cf1579a710b879e6f64bb7e3) app/ui: use data URLs for image thumbnails to fix first-render loading ### 📊 Changes **1 file changed** (+31 additions, -63 deletions) <details> <summary>View changed files</summary> 📝 `app/ui/app/src/components/ImageThumbnail.tsx` (+31 -63) </details> ### 📄 Description 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 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-05-05 10:10:22 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
amd
api
app
bug
build
cli
cloud
compatibility
context-length
create
docker
documentation
embeddings
feature request
feedback wanted
good first issue
gpt-oss
gpu
harmony
help wanted
image
install
intel
js
launch
linux
macos
memory
mlx
model
needs more info
networking
nvidia
ollama.com
performance
pull-request
Mirrored from GitHub Pull Request
 python
question
registry
rendering
thinking
tools
top
vulkan
windows
wsl
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/ollama#77502
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?