Images Not Loading in Lovable App
Quick Answer
Images referenced with relative paths or stored outside the public folder don't deploy correctly. Start with "Tell Lovable to fix image paths" before making broader code changes.
You're in the right place if...
- !Broken image icons showing
- !Images load in preview but not after deploy
Why this happens
Images referenced with relative paths or stored outside the public folder don't deploy correctly.
Fix
Tell Lovable to fix image paths
This prompt fixes the three most common image issues:
Copy this prompt
Images are not loading after deployment. Please: 1. Move all images to the /public folder 2. Update all image paths to use /imagename.jpg (not relative paths) 3. Replace any broken external image URLs with placeholder images from https://placehold.co/[width]x[height]
Prevent this next time
Always put images in the /public folder and reference them with absolute paths starting with /.
Frequently Asked Questions
Preview resolves relative paths differently. Production needs images in /public with absolute paths.
Yes, but add them to next.config.js images.remotePatterns to avoid Next.js image optimization errors.
Related fixes
Weekly Newsletter
Get next week's fix before you need it.
Join developers getting weekly vibe coding tips, error fixes, and tool updates.
Subscribe on Substack →