Fixing Broken Asset Paths After Lovable Deployment

Why asset paths break when deploying Lovable projects

Lovable projects use Vite as the build tool, which handles assets differently depending on where they are stored. Files in the /public folder are copied directly to the build output with their original names and paths. Files in /src are processed by Vite, which adds content hashes to filenames (like logo-a3b4c5d.png) for cache busting. Asset 404s happen when your code references a path that does not exist in the deployed build. Common scenarios include: using relative paths (./images/logo.png) instead of root-relative paths (/images/logo.png), referencing /src assets with their original names instead of the hashed versions, or setting an incorrect base path in vite.config.ts. This problem is invisible in the Lovable preview because the development server resolves paths differently than a production server. An asset that works perfectly in preview may return 404 after deployment if the path is not configured for production.

• Assets are in /src instead of /public, so Vite hashes the filenames and the original paths no longer work
• Code uses relative paths (./image.png) that break when accessed from nested routes
• The base path in vite.config.ts is set incorrectly for the hosting platform
• CDN or hosting platform serves cached versions of old assets while the new build references new hashed filenames
• Asset files were not committed to GitHub and are missing from the deployed build

Error messages you might see

Before you start

• A Lovable project deployed to an external hosting platform where assets are not loading
• Access to the browser developer tools (Network tab) to identify which assets return 404
• Dev Mode or GitHub access to check where files are actually located in the project

How to fix it

// File location: src/assets/images/logo.png
// Import in code:
import logo from "./assets/images/logo.png";
// This works in dev but the hashed filename may cause issues

// File location: public/images/logo.png
// Reference in code (no import needed):
<img src="/images/logo.png" alt="Logo" />
// The file is served directly at /images/logo.png

// Relative path — breaks on nested routes
<img src="./images/logo.png" alt="Logo" />
<img src="images/hero.jpg" alt="Hero" />
<link rel="stylesheet" href="styles/custom.css" />

// Root-relative paths — work from any route
<img src="/images/logo.png" alt="Logo" />
<img src="/images/hero.jpg" alt="Hero" />
<link rel="stylesheet" href="/styles/custom.css" />

// vite.config.ts — incorrect base path
export default defineConfig({
  base: '/wrong-path/',
  plugins: [react()],
});

// vite.config.ts — correct base path for root deployment
export default defineConfig({
  base: '/',
  plugins: [react()],
});

// Old deployment serves: logo-abc123.png
// New deployment references: logo-def456.png
// CDN still serves the old page pointing to the old hash

// After cache clear:
// Browser requests logo-def456.png
// Server returns the correct new file
// No 404 errors in the Network tab

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, '/subdir/' for subdirectory
7  base: "/",
8  plugins: [react()],
9  resolve: {
10    alias: {
11      "@": path.resolve(__dirname, "./src"),
12    },
13  },
14  build: {
15    // Output directory for the production build
16    outDir: "dist",
17    // Generate source maps for debugging (optional)
18    sourcemap: false,
19    // Asset handling
20    assetsDir: "assets",
21    // Inline assets smaller than 4kb as base64
22    assetsInlineLimit: 4096,
23    rollupOptions: {
24      output: {
25        // Organize built assets into subdirectories
26        assetFileNames: "assets/[name]-[hash][extname]",
27        chunkFileNames: "assets/[name]-[hash].js",
28        entryFileNames: "assets/[name]-[hash].js",
29      },
30    },
31  },
32});

Best practices to prevent this

• Place all static assets (images, fonts, icons) in the /public folder for predictable paths in production
• Always use root-relative paths starting with / for assets in /public — never use relative paths
• For assets imported in JavaScript (icons used as React components), keep them in /src and use import statements
• Set the base path in vite.config.ts to match your deployment URL structure — '/' for root, '/subdir/' for subdirectories
• After deployment, check the browser Network tab for 404 errors to identify any missing assets
• Commit all asset files to GitHub before deploying — files not in the repo will not be in the build
• Use Supabase Storage for user-uploaded files instead of the /public folder — these survive across deployments
• Clear hosting platform caches after deploying if asset URLs have changed

Still stuck?

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

Related error patterns