Vite Asset Imports

In Vite you import assets like code. The default gives you a URL; query suffixes change what you get back. Expand each to see what it returns and when to reach for it.

Import an asset — pick the form you need

public/ vs imported assets

Two different mechanisms — choose deliberately:

// 1) IMPORTED (src/) — processed, hashed, tree-shakeable
import logo from "./logo.svg";
// → /assets/logo-a1b2c3.svg   (fingerprinted, cache-busted)

// 2) public/ — copied verbatim, referenced by absolute path
// file: public/favicon.svg  →  served at  /favicon.svg
<link rel="icon" href="/favicon.svg" />
// no hash, no processing — use for robots.txt, favicons, files
// referenced by exact name, or things outside the module graph