Fixing broken image rendering in V0 exports

Why images break after exporting V0 code

V0's preview sandbox uses esm.sh and a virtual file system that resolves image paths flexibly. When you export the code via GitHub integration or ZIP download, those paths must resolve against a real Next.js project structure. Images fail for several reasons: the /public directory may not be included in the export, image paths may reference sandbox-specific URLs, the Next.js Image component requires explicit domain configuration for remote images, and static export mode (output: 'export') requires the unoptimized prop because Image Optimization requires a server.

• Image files from V0's sandbox are not included in the GitHub export or ZIP download
• Paths reference V0-specific URLs like blob: or esm.sh CDN paths that do not exist outside the sandbox
• Next.js Image component blocks remote images from domains not listed in next.config.js
• Static export mode requires images.unoptimized: true because Image Optimization needs a running server
• Case-sensitive file paths on Linux servers do not match the casing used in V0's preview

Error messages you might see

Before you start

• A V0 project exported via GitHub integration or ZIP download
• The exported project running locally or deployed to Vercel
• Access to modify next.config.js and the /public directory

How to fix it

<Image
  src="/images/hero.png"
  alt="Hero"
  width={800}
  height={400}
/>
{/* File does not exist at public/images/hero.png */}

<Image
  src="/images/hero.png"
  alt="Hero"
  width={800}
  height={400}
/>
{/* File saved to public/images/hero.png */}

/** @type {import('next').NextConfig} */
const nextConfig = {};
module.exports = nextConfig;

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "images.unsplash.com",
      },
      {
        protocol: "https",
        hostname: "via.placeholder.com",
      },
    ],
  },
};
module.exports = nextConfig;

const nextConfig = {
  output: 'export',
};

const nextConfig = {
  output: 'export',
  images: {
    unoptimized: true,
  },
};

<img
  src="blob:https://v0.dev/abc123-image"
  alt="Generated"
/>

<Image
  src="/generated-image.png"
  alt="Generated"
  width={400}
  height={300}
/>

Complete code example

1/** @type {import('next').NextConfig} */
2const nextConfig = {
3  // Uncomment for static export (Netlify, GitHub Pages, etc.)
4  // output: 'export',
5
6  images: {
7    // Required when using output: 'export'
8    // unoptimized: true,
9
10    // Allow remote images from these domains
11    remotePatterns: [
12      {
13        protocol: "https",
14        hostname: "images.unsplash.com",
15      },
16      {
17        protocol: "https",
18        hostname: "via.placeholder.com",
19      },
20      {
21        protocol: "https",
22        hostname: "avatars.githubusercontent.com",
23      },
24    ],
25  },
26};
27
28module.exports = nextConfig;

Best practices to prevent this

• Always check the browser DevTools Network tab for 404 image requests after deploying an exported V0 project
• Place all local images in the /public directory and reference them with absolute paths starting from /
• Add every external image domain to images.remotePatterns in next.config.js before deploying
• Use the Next.js Image component instead of plain img tags for automatic optimization and lazy loading
• Set images.unoptimized to true only when using static export — keep optimization enabled for Vercel deployments
• Verify image file name casing matches exactly, since Linux servers are case-sensitive while macOS and Windows are not
• When exporting via ZIP, verify the /public directory and all its contents are included in the download

Still stuck?

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

Related error patterns

Explore related guides

Guides from other topics that help with this issue