langgenius / langgenius/dify

fix(web): re-fetch images on prop change without dropping their blob URLs

Open Beginner friendly
#39,518 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
156k
Forks
24.6k
Avg merge
22h 9m
Merged PRs (30d)
610

Description

## ImagePreviewer never loads new images when the prop changes while the component stays mounted

`web/app/components/datasets/common/image-previewer/index.tsx` lines 97-112 — the loading `useEffect` has an empty dependency array but reads the `images` prop. So if the previewer instance is reused for a different document or a different set of images, the new images are never fetched. The user can land on a stuck loading state or a 'no image' placeholder while the actual images exist.

A naive fix that simply adds `images` to the dep array is also broken: the same `useEffect` returns a cleanup that revokes every cached blob URL and clears the entire cache, so on every change the cleanup would tear down URLs still needed by the new image list.

### Steps to reproduce

1. Open the image previewer on document A.
2. Without unmounting the previewer, switch to document B.
3. Observe: document B's images never load, and the cache for document A's URLs is wiped if the effect re-runs.

### Expected

When the `images` prop changes, the previewer fetches the new set of images. Blob URLs of still-present images are reused, not revoked. Cleanup runs on unmount only.

### Actual

The loading effect runs only once on mount. New images are not fetched. Any naive dep-array fix would also wipe cached blob URLs on every change, breaking subsequent previews.

### Suggested fix

Split into two effects:
- Loading effect with `[images]` deps, no cleanup.
- Unmount-only effect with `[]` deps that handles `isMounted.current` and the cache cleanup.

Contributor guide

Open the contributing guide

Research direction

Start in web/app/components/datasets/common/image-previewer/index.tsx, especially lines 97-112, and inspect how the loading effect reads images and manages the blob URL cache. Separate prop-change loading from unmount cleanup, then verify that switching between documents fetches new images, reuses URLs for retained images, and only revokes cached URLs on unmount.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.