Images, Videos & Media
Design & UI · 10 articles
Add images to prompt
Upload images directly in your prompt by using the image upload button. This helps Lovable understand your design vision and build more accurately.
Can I add images to a Lovable prompt?
Yes, you can add images to your prompts. Upload screenshots of designs or reference images to help Lovable understand what you're building. This is especially useful when working with Figma designs or giving visual context for changes you want to make.
Can I add videos to a Lovable prompt?
The reference documentation doesn't mention video support for prompts. For best results, use images, sketches, or Figma designs to communicate visually. Contact [email protected] if you have questions about specific media formats.
Linking to an external video
Embed videos using `<iframe>` with sources like YouTube, Vimeo, or direct MP4 URLs. For YouTube: paste a shareable link into Lovable and it auto-generates the embed code. For custom videos, use HTML5 `<video>` tags with multiple source formats (mp4, webm) for browser compatibility. Keep file sizes manageable for performance.
Upload the image to the prompt chat
Click the image icon in the prompt chat input, select an image from your computer, and it uploads. Describe what you want done with it (e.g., "Use this as a hero image", "Generate a design based on this screenshot"). Lovable processes the image and incorporates it into your app. This works for designs, logos, wireframes, and screenshots.
Using a sketch
Upload a sketch or hand-drawn design as an image to your prompt. Lovable can interpret sketches and turn them into functional web components. This is great for quick mockups or design iteration.
Using a video from your GitHub public folder
Add video files (mp4, webm) to your GitHub repo's `/public` folder. Reference them via `<video>` tags with `src="/videos/filename.mp4"`. Lovable will serve them with your app. For best performance, optimize videos (compress, transcode to multiple formats), and consider lazy-loading below the fold.
Using an external image URL
Paste an external image URL (e.g., `https://example.com/image.jpg`) into the `src` attribute of an `<img>` tag via code or visual editor. Ensure the URL is publicly accessible (CORS headers should allow cross-origin requests). External images don't increase your app's bundle size but depend on external uptime. Use trusted, fast CDNs for best performance.
Using images from your GitHub public directory
After setting up GitHub integration, reference images from your repo's `/public` folder directly in your app (e.g., `src="/images/logo.png"`). These are bundled with your app and don't rely on external sources. When you deploy via GitHub, images are included automatically. This is faster and more reliable than external URLs.
[Media & Files] How to handle large file uploads (images/videos) in Lovable?
Use Supabase Storage for file uploads (50MB per file on free tier, higher on paid plans). Prompt Lovable to: 'Add file upload with Supabase Storage.' Lovable generates the upload UI and Edge Function. Set storage buckets to public or private with RLS policies based on your needs.
