> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-use.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Image />

> Image component that handles both data URLs and public file paths for widgets

The `Image` component automatically handles image sources, supporting both data URLs and public file paths. It automatically prefixes relative paths with the MCP public URL, making it easy to use images from your `public/` folder.

## Import

```typescript theme={null}
import { Image } from 'mcp-use/react';
```

## Props

The `Image` component accepts all standard `img` HTML attributes, plus:

| Prop  | Type     | Default      | Description              |
| ----- | -------- | ------------ | ------------------------ |
| `src` | `string` | **required** | Image source URL or path |

## Source Resolution

The component handles different source formats:

1. **Absolute URLs** (`http://`, `https://`): Used as-is
2. **Data URLs** (`data:`): Used as-is
3. **Relative paths** (`/fruits/apple.png`): Prefixed with MCP public URL

## Basic Usage

```tsx theme={null}
import { Image } from 'mcp-use/react';

function MyWidget() {
  return (
    <div>
      {/* Public folder image */}
      <Image src="/fruits/apple.png" alt="Apple" />
      
      {/* Absolute URL */}
      <Image src="https://example.com/image.jpg" alt="Example" />
      
      {/* Data URL */}
      <Image src="data:image/png;base64,..." alt="Inline" />
    </div>
  );
}
```

## Public Folder Images

When using images from your `public/` folder, use paths relative to the public root:

```tsx theme={null}
// public/fruits/apple.png
<Image src="/fruits/apple.png" alt="Apple" />

// public/logo.svg
<Image src="/logo.svg" alt="Logo" />
```

The component automatically resolves these to the correct URL using `window.__mcpPublicUrl`.

## Related Utilities

The component uses these window globals (injected by the MCP server or at build time):

* `window.__mcpPublicAssetsUrl`: Base URL for public assets in static deployments (e.g., Supabase storage bucket)
* `window.__mcpPublicUrl`: Base URL for public assets (e.g., `http://localhost:3000/mcp-use/public`) - used as fallback
* `window.__getFile`: Helper function to get file URLs

<Note>
  The Image component prefers `__mcpPublicAssetsUrl` when available (static deployments), falling back to `__mcpPublicUrl` for dynamic serving.
</Note>

## Related Components

* [`McpUseProvider`](./mcpuseprovider) - Unified provider for widgets
* [`useWidget`](./usewidget) - Widget hook for accessing props