How should I handle caching for dynamically loaded images in a Vite gallery?
Asked by
MellowPine42
I'm building a trading card game gallery from JSON returned by an endpoint. Each card has a set number and card number, and the app constructs an image path such as `images/cards/sets/set-number/card-number.webp`, creates the card elements dynamically, and adds them to the gallery. This works well until the artwork for an existing card changes, at which point the browser may keep showing the cached image.
The rest of the site is built with Vite, so I'm wondering whether Vite can bundle or hash these dynamically loaded images too. I'd rather not import every possible card image into JavaScript or maintain a separate list of imports that has to be updated whenever the card data changes. What's the recommended way to keep these runtime-loaded images fresh while still using Vite for the deployment build?
Answers
This is mainly a cache-busting problem, not a bundling problem. Vite can hash assets that are imported during the build, but it won’t automatically process URLs assembled from JSON at runtime. Keep the images in a publicly served directory and continue generating their URLs dynamically.
When artwork changes, add a version to the URL, such as `card.webp?v=2`. Ideally, store a `lastUpdated`, version, or content token with the card data and use that value instead of a hardcoded timestamp. The URL changes only when the artwork changes, so the browser fetches the new file without requiring imports for every card.
Reply to this answer
The simplest solution is to rename the image whenever its artwork changes, or include a version token in the filename or query string. Asset bundling isn’t necessary for files that the browser fetches dynamically. As long as the URL changes when the content changes, normal browser caching will work correctly.
Reply to this answer
You can also generate a manifest during the build. Have a script scan the image directory, calculate a hash for each file, and write a mapping from each card’s set/card identifier to its hashed URL. The gallery loads that manifest and resolves the values from the JSON instead of constructing the final filename itself.
When an image changes, its content hash changes on the next build, producing a new URL and avoiding stale browser caches. This keeps the card JSON as the source of truth and avoids maintaining a large collection of manual imports. If a manifest feels excessive, a per-card version field or a global asset version in the JSON is a simpler alternative.
Reply to this answer
You don’t need to update both the database and a JavaScript import list. Keep the runtime image paths outside Vite’s static import graph, then either change the filename when art changes or update the cache headers/version value. Vite can continue bundling the rest of the application while your dynamically requested images are handled separately.
Reply to this answer
Add your answer
Answers are reviewed before publication.
MellowPine42: Using a `lastUpdated` value in the card data sounds like the best fit. This also clears up my misunderstanding about what Vite bundles automatically.