js/asset-import

Why

A string such as src="/images/hero.jpg" in a component skips the bundler: the file gets no content hash (so caches serve the old image after a change), is not optimised, is not checked at build time (a renamed file fails only in production), and breaks when the site is served under a base path (/app/), because only imports, CSS url() and index.html are rewritten.

Fix

Import the file from the source tree (import hero from './hero.jpg') and use the result, or the framework's image component with that import (next/image, Astro <Image>, @nuxt/image, SvelteKit enhanced:img). For files that must stay in public/, build the URL with the base helper: import.meta.env.BASE_URL (Vite, Astro), asset() from $app/paths (SvelteKit), useRuntimeConfig().app.baseURL (Nuxt), the configured basePath (Next.js). Vue templates may use relative or @/ paths, which the compiler turns into imports. Icons follow html/icon-from-set.

Examples

// bad
<img src="/images/hero.jpg" alt="Harbour at dawn" width="1200" height="600" />
// good
import hero from './assets/hero.jpg'
<img src={hero} alt="Harbour at dawn" width="1200" height="600" />

Sources

• Vite, Building for production (public base path and import.meta.env.BASE_URL)
• Vite, Static asset handling (importing an asset as a URL)
• Next.js, basePath (images need the base path)
• Astro, Images (import local images)

Read it in the terminal

npx github:dawidolko/frontend-skills explain js/asset-import