Fixing Incorrect Static File Paths After Lovable Build

Why static file paths work in preview but break after building

Lovable's development server (Vite dev mode) resolves file paths more flexibly than a production build. In development, Vite can find files through multiple resolution strategies. But after running the build, assets are processed, renamed, and reorganized in the dist/ folder. The key difference is between /public and /src assets. Files in /public are copied directly to dist/ with their original names — /public/logo.png becomes dist/logo.png, accessible at /logo.png. Files in /src that are imported in JavaScript get content hashes added to their names — src/assets/logo.png becomes dist/assets/logo-a3b4c5d.png. If your code references src/assets/logo.png by its original path after build, the file does not exist at that path anymore. The Vite base path in vite.config.ts also plays a role. If base is set to anything other than '/', all asset URLs are prefixed with that path. A base of '/app/' turns /logo.png into /app/logo.png, which breaks if your server does not serve files from that prefix.

• Referencing /src assets by path instead of using JavaScript imports — the hashed filename is not known at path-reference time
• The Vite base path in vite.config.ts does not match the deployment URL structure
• Using relative paths (./image.png) that resolve differently depending on the current route
• Assets not placed in /public are expected to be at their source paths, which do not exist in the build
• Hosting platform serves the dist/ folder from a subdirectory but base is set to '/'

Error messages you might see

Before you start

• A Lovable project where static files are not loading correctly after deployment
• Access to browser developer tools (Network tab) to see which files return 404
• Dev Mode or GitHub access to view the project's file structure and vite.config.ts

How to fix it

// Wrong: referencing a /src file by path in JSX
<img src="/src/assets/logo.png" alt="Logo" />
// This path does not exist after build

// Option A: move to /public and reference by root-relative path
<img src="/images/logo.png" alt="Logo" />
// File location: public/images/logo.png
// Option B: import from /src (Vite handles the path)
import logo from "@/assets/logo.png";
<img src={logo} alt="Logo" />
// Vite resolves this to the correct hashed filename

// Incorrect base path for root deployment
export default defineConfig({
  base: '/my-app/',  // Wrong if deploying to root
  plugins: [react()],
});

// Correct base path for root deployment
export default defineConfig({
  base: '/',  // Correct for lovable.app, Vercel, Netlify root deployments
  plugins: [react()],
});

// Relative paths — break on nested routes
<img src="./images/hero.jpg" />
<link rel="stylesheet" href="styles/custom.css" />
background: url('images/pattern.png');

// Root-relative paths — work everywhere
<img src="/images/hero.jpg" />
<link rel="stylesheet" href="/styles/custom.css" />
background: url('/images/pattern.png');

// Build output missing expected files
// dist/
//   assets/
//     index-abc123.js
//     index-def456.css
//   index.html
// Missing: images/logo.png, fonts/custom.woff2

// Build output with all files present
// dist/
//   assets/
//     index-abc123.js
//     index-def456.css
//   images/
//     logo.png
//     hero.jpg
//   fonts/
//     custom.woff2
//   index.html
//   favicon.ico

Complete code example

1import { defineConfig } from "vite";
2import react from "@vitejs/plugin-react-swc";
3import path from "path";
4
5export default defineConfig({
6  // Base path: '/' for root deployment
7  // Change to '/subdir/' if deploying to a subdirectory
8  base: "/",
9  
10  plugins: [react()],
11  
12  resolve: {
13    alias: {
14      "@": path.resolve(__dirname, "./src"),
15    },
16  },
17  
18  build: {
19    outDir: "dist",
20    // Assets smaller than 4kb are inlined as base64
21    assetsInlineLimit: 4096,
22    rollupOptions: {
23      output: {
24        // Organize output by type
25        assetFileNames: (assetInfo) => {
26          // Keep fonts in a fonts directory
27          if (assetInfo.name?.match(/\.(woff2?|eot|ttf|otf)$/)) {
28            return "fonts/[name]-[hash][extname]";
29          }
30          // Keep images in an images directory
31          if (assetInfo.name?.match(/\.(png|jpe?g|gif|svg|webp|ico)$/)) {
32            return "images/[name]-[hash][extname]";
33          }
34          return "assets/[name]-[hash][extname]";
35        },
36      },
37    },
38  },
39});

Best practices to prevent this

• Place static assets in /public for predictable, unhashed file paths in production
• Use JavaScript imports for assets that need processing (SVG components, optimized images)
• Always use root-relative paths (starting with /) for assets in /public — never relative paths
• Set the Vite base path to '/' for root deployments and '/subdir/' for subdirectory deployments
• Commit all asset files to GitHub before deploying — files not in the repo will not be in the build
• Check the dist/ folder contents after building to verify all expected assets are present
• Use Supabase Storage for user-uploaded content instead of /public — uploaded files persist across builds
• Add cache-control headers for hashed assets (they are safe to cache indefinitely since the hash changes with content)

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns