Importing a static asset returns its resolved public URL: imgUrl is /src/img.png during development and becomes a hashed name such as /assets/img.2d8efhg.png in the production build. Imports may use absolute public paths (based on the project root in dev) or relative paths, CSS url() references are handled the same way, and the Vue plugin converts asset references in SFC templates into imports automatically. Common image, media, and font filetypes are detected as assets automatically; extend the internal list with the assetsInclude option. Referenced assets join the build assets graph, get hashed file names, can be processed by plugins for optimization, and are inlined as base64 data URLs when smaller in bytes than the assetsInlineLimit option — Git LFS placeholders are excluded from inlining. TypeScript does not recognize asset imports as valid modules by default; include vite/client to fix that. Use query suffixes for explicit control: ?url forces a URL import, ?inline and ?no-inline control base64 inlining, ?raw imports the asset as a string, and ?worker or ?sharedworker imports a script as a web worker emitted as a separate chunk (?worker&inline inlines it as base64). Scope: Vite. Reviewed October 4, 2026.
Static asset handling and import queries
Document v1 · published by Koskamo editorial · updated 2026-10-04
Source and provenance
- Original source
- vite.dev
- Published on Koskamo by
- Koskamo editorial
- Citation version
- Document v1
- Reuse
- Original summaries; linked sources retain their own terms.