--- title: "Images and files not loading after deploy" description: "Broken images after deploy are usually an unlisted image host, a private bucket, or a Vercel limit. How to read the status code and fix each one." url: https://whocanfixmyapp.com/problems/images-not-loading-after-deploy --- [Home](https://whocanfixmyapp.com/) / [Problems](https://whocanfixmyapp.com/problems) / [Screens and forms](https://whocanfixmyapp.com/problems#screens-and-forms) # Images and files not loading after deploy VC-56 · Next.js · Vercel · Supabase · Updated October 2026 · By [Nathaniel Kelley](https://whocanfixmyapp.com/authors/nathaniel-kelley) Quick verdict Partly fixable yourself. A config line or a bucket setting, under an hour. - **How serious**: Medium - **Fix it yourself?**: Partly, some steps need a developer - **Typical cost**: €99–$990 for a single fix ([prices](https://whocanfixmyapp.com/pricing)) - **Top rated for Supabase**: [Redlab](https://whocanfixmyapp.com/companies/redlab) · **10.0**/10 **What you see.** Pictures and uploaded files show as broken icons or alt text on the live site but worked in preview. ## Why it happens There are three usual causes, and the status code in the Network tab tells them apart. First, Next.js only loads remote images from hosts listed under `images.remotePatterns` in `next.config.js`. If your Supabase storage host is not listed, the image request fails. Second, Supabase storage buckets are private by default. Files in a private bucket can only be fetched with a signed URL or an authorized download. A plain public URL returns an error. Public buckets skip access checks for reads. Third, on the Vercel Hobby plan image optimization includes 5,000 transformations a month. Past that, new images fail with a 402 and the alt text shows instead. Smaller causes are a file that was never committed to the repository and file names whose case differs, since the server is case sensitive and your laptop may not be. ## Fix it yourself 1. Press F12, open **Network**, filter by Img and click a broken image. 400 from `/_next/image` means the host is not allowed, 403 from Supabase a private bucket, 402 the Vercel limit, 404 a wrong path. 2. Next.js: add your project host to `images.remotePatterns` in `next.config.js` with protocol https, hostname `yourproject.supabase.co` and pathname `/storage/v1/object/public/**`. Redeploy. 3. Supabase: open **Storage** and the bucket. Public images like logos can live in a public bucket. User documents stay private and the app must use `createSignedUrl`. Do not make a private bucket public just to fix a bug. 4. Check that the file really exists in the bucket or in the `public` folder of your repository, with the exact same upper and lower case as the code. 5. Hit the Vercel limit: add `unoptimized` to those images or move to a paid plan. Already cached images keep working. 6. Retest in a private window, since the browser may have cached the broken response. ## When to get an engineer Get an engineer when uploads from users are involved, because a wrong bucket setting can expose private files to anyone with the link. Tell them the status code, the failing URL, and which bucket holds the files. A single fix is €99–$990, about two days. Ask them to confirm every bucket is private where it should be, which is check DATA-04 on the [checklist](https://whocanfixmyapp.com/checklist). ## Top-rated companies for Supabase apps Ranked by our score: published prices, scope of work, AI tools named, timing and a low-risk first step. [How we score](https://whocanfixmyapp.com/methodology#score). - 1 · [Redlab](https://whocanfixmyapp.com/companies/redlab) · **10.0**/10 · Best for: A full rescue by one team that keeps building · Free first step · from $490 - 2 · [Vibe Code Rescue (Lev Arakelyan)](https://whocanfixmyapp.com/companies/vibe-code-rescue-lev-arakelyan) · **9.0**/10 · Best for: A one-off check and a cleanup · From $299 - 3 · [LazyCodeLab](https://whocanfixmyapp.com/companies/lazycodelab) · **9.0**/10 · Best for: A one-off check and a cleanup · From $399 [All 29 Supabase companies, ranked](https://whocanfixmyapp.com/best/supabase-developers) ## Check these DATA-04 · High File storage is private where it should be Upload a private file, copy its URL, and open it in a private window. If it loads, the bucket is public. COST-04 · Medium Images are resized and compressed Uploaded photos served at full size are a common cause of slow pages. COST-03 · Medium Key pages load fast on a phone Run PageSpeed Insights on the home page and the main app screen, on mobile. OPS-04 · Medium Secrets live in the host's environment settings Keys belong in environment variables on the server, not in the repository or in front-end code. ## Questions ### Should I just make all buckets public? Only for files that anyone may see, like product photos. Invoices, ID scans and private uploads belong in a private bucket with signed URLs. ### Why does the preview load the images? The preview may run without Next.js image optimization, or you were signed in as the owner, who could read the private bucket. Sources: [Next.js: Image component](https://nextjs.org/docs/app/api-reference/components/image); [Supabase: storage buckets](https://supabase.com/docs/guides/storage/buckets/fundamentals); [Supabase: storage access control](https://supabase.com/docs/guides/storage/security/access-control); [Vercel: image optimization limits](https://vercel.com/docs/image-optimization/limits-and-pricing). **Supabase guide** What Supabase builds, where it breaks and how to check it: [Supabase RLS audit: how to check an AI-built app's database rules](https://whocanfixmyapp.com/guides/supabase). **Same category** - [CORS error only on the live site](https://whocanfixmyapp.com/problems/cors-error-only-on-the-live-site) - [Hydration error after deploy](https://whocanfixmyapp.com/problems/hydration-error-after-deploy) - [Form submits but nothing happens](https://whocanfixmyapp.com/problems/form-submits-but-nothing-happens) - [Looks fine on desktop, broken on phones](https://whocanfixmyapp.com/problems/looks-fine-on-desktop-broken-on-phones) - [App is stuck on a loading spinner](https://whocanfixmyapp.com/problems/stuck-on-a-loading-spinner) [All screens and forms problems](https://whocanfixmyapp.com/problems#screens-and-forms) **Run every check** The [production checklist](https://whocanfixmyapp.com/checklist) has all 24 checks with a verdict.