v0 images not showing after deploy: the causes and fixes
Images that appear in the v0 preview but break on Vercel are usually remote images the Next.js optimizer is not allowed to fetch, images that point at a temporary or placeholder URL instead of a file in /public, or paths whose letter case does not match the file name. Move your own images into /public, list any remote hosts in images.remotePatterns in next.config, and check that every path matches the file name exactly.
What you'll see
On the live site you see empty boxes, alt text where a picture should be, or a broken image icon. In the Network tab the requests go to /_next/image and come back as 400, 404 or 502, sometimes with the code OPTIMIZED_EXTERNAL_IMAGE_REQUEST_UNAUTHORIZED.
Why it happens
1. The remote host is not allowed for next/image
The Image component sends remote pictures through Vercel’s optimizer, which only fetches from hosts listed in images.remotePatterns. Anything else is refused, so the image works as a plain img tag in some previews but fails through /_next/image in production.
2. Images point at a temporary or placeholder source
v0 often uses placeholder services or uploads that live only inside the chat while you design. Those URLs are not part of your repository and can expire or be blocked once the site is deployed.
3. Path or letter case does not match the file
Vercel builds on Linux, where Hero.webp and hero.webp are different files. A path that works on a Mac or in the preview can 404 in production because of one capital letter.
How to fix it
- Open the live page, press F12, choose Network and filter by Img. Click a failed request and note the status code and the original image URL inside the url= parameter.
- For each image you own, download it, put it in the public folder (for example public/images/hero.webp) with a lowercase file name, and reference it as /images/hero.webp.
- For images that must stay remote, such as a CMS or Supabase Storage bucket, add the host to images.remotePatterns in next.config with protocol https, the exact hostname and a pathname pattern.
- Search the code for placeholder.svg, via.placeholder or other demo image services and replace them with real files.
- Redeploy, then reload the live page with the cache disabled in DevTools to confirm the new paths load.
- Only if one stubborn remote image still fails, add the unoptimized prop to that Image as a temporary workaround while you investigate. It skips resizing, so the visitor downloads the full file.
Prompt to paste into v0
Some images are broken on the deployed site but work in the preview. Move every image the site owns into /public with lowercase, hyphenated file names and update all references. Add any remaining remote image hosts to images.remotePatterns in next.config. Replace placeholder image URLs with real files, give every image meaningful alt text, and list every image path you changed.
How to check it's fixed
- In DevTools Network filtered to Img, every image request on the key pages returns 200.
- Check the same pages at phone width, where responsive images may request different sizes from the optimizer.
What a QAlaunch scan shows for this
- Broken images on the page, with the image URL that failed.
- Failed requests to /_next/image or a remote host, with the status code (400, 404 or 502).
- Images with missing alt text, picked up by the accessibility checks.
- Heavy images flagged by the PageSpeed performance audit if you fall back to unoptimized files.
See exactly what a full report contains in the sample report.
Frequently asked questions
Why do images work locally but not on Vercel?
Local development serves files more leniently: macOS ignores letter case and the dev server can load remote images without the same checks. Vercel builds on Linux and runs the production image optimizer, which is stricter about both.
Should I just use unoptimized on every image?
No. It works, but every visitor downloads the full-size file, which slows the page on phones. Fix the remotePatterns entry or move the images into /public instead.
What does OPTIMIZED_EXTERNAL_IMAGE_REQUEST_UNAUTHORIZED mean?
Vercel’s optimizer refused to fetch an external image, usually because its host is not allowed in your images configuration. Check the hostname in the error against your remotePatterns entry character by character.
Rather have a QA engineer test it by hand?
If this is a site you're launching or handing to a client, I'll go through it by hand, including the v0-specific issues a scan can't reach, like logged-in flows.
- Up to 10 key pages tested by hand, not a scan
- Every flow a customer uses: forms, sign-up, checkout, booking
- Real mobile and desktop browsers
- A written report in plain language, with screenshots
- A 15-minute call to walk you through it
- 10 years of professional QA experience
Tell me about your site and I'll reply personally, usually the same day.
No payment now. I'll confirm scope and price first.
Related fixes
- v0 preview doesn't match the deployed site: how to fix it
- How to change the "v0 App" title and "Created with v0" description
- v0 "Application error: a client-side exception has occurred": the fix
- Vercel site asks visitors to log in: why and how to make it public
- v0 contact form not sending email: what to check
More for v0: all v0 fixes · v0 testing
Written by Waqas Ahmad, QA engineer with 10 years of professional testing experience. Last checked October 26, 2026.
Sources: Vercel Community: remote images not loading on deployment · Vercel Community: images not displaying after deploying to Vercel · Vercel Community: images will not load for Next.js project