---

date: 2026-06-23 tags: [storybook, vrt, assets, vite] status: active graduated_to:

Storybook serves no public/ assets without staticDirs — absolute asset paths 404

Symptom — the app logo rendered as a broken image in the Storybook UI and in every VRT capture that shows it (the sidebar, the header). No error, just a missing image.

Root cause — AppLogoIcon.vue points at an absolute public path: <img src="/web-app-manifest-192x192.png">, served from public/ in the real app. Storybook runs its own Vite pipeline and had no staticDirs, so public/ was never copied into the build and that path 404'd.

Fix — point Storybook at the app's public dir in .storybook/main.ts:15 (PR #726):

staticDirs: ['../public'],

Guard — the staticDirs line itself. Any component that references a public/ asset by absolute path now resolves in both the Storybook UI and the capture. When adding such a component, the broken image is the tell that the asset isn't under a staticDirs root.