diff --git a/README.md b/README.md
index 37ea17d..22aacbc 100644
--- a/README.md
+++ b/README.md
@@ -89,7 +89,7 @@ AI Elements Vue includes the following components:
| `actions` | ✅ 已完成 | Interactive action buttons for AI responses |
| `branch` | ✅ 已完成 | Branch visualization for conversation flows |
| `code-block` | ✅ 已完成 | Syntax-highlighted code display with copy functionality |
-| `image` | ❌ 未完成 | AI-generated image display component |
+| `image` | ✅ 已完成 | AI-generated image display component |
| `inline-citation` | ❌ 未完成 | Inline source citations |
| `loader` | ❌ 未完成 | Loading states for AI operations |
| `reasoning` | ❌ 未完成 | Display AI reasoning and thought processes |
diff --git a/apps/test/app/examples/image.vue b/apps/test/app/examples/image.vue
new file mode 100644
index 0000000..65113dc
--- /dev/null
+++ b/apps/test/app/examples/image.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/apps/test/app/examples/index.ts b/apps/test/app/examples/index.ts
new file mode 100644
index 0000000..78f5136
--- /dev/null
+++ b/apps/test/app/examples/index.ts
@@ -0,0 +1,10 @@
+export { default as ActionsHover } from './actions-hover.vue'
+export { default as Actions } from './actions.vue'
+export { default as Branch } from './branch.vue'
+export { default as CodeBlock } from './code-block.vue'
+export { default as Conversation } from './conversation.vue'
+export { default as Image } from './image.vue'
+export { default as MessageMarkdown } from './message-markdown.vue'
+export { default as Message } from './message.vue'
+export { default as PromptInput } from './prompt-input.vue'
+export { default as Response } from './response.vue'
diff --git a/apps/test/app/pages/index.vue b/apps/test/app/pages/index.vue
index e6587c3..35bbc77 100644
--- a/apps/test/app/pages/index.vue
+++ b/apps/test/app/pages/index.vue
@@ -5,6 +5,7 @@ import Actions from '~/examples/actions.vue'
import Branch from '~/examples/branch.vue'
import CodeBlock from '~/examples/code-block.vue'
import Conversation from '~/examples/conversation.vue'
+import Image from '~/examples/image.vue'
import MessageMarkdown from '~/examples/message-markdown.vue'
import Message from '~/examples/message.vue'
import PromptInput from '~/examples/prompt-input.vue'
@@ -20,6 +21,7 @@ const components = [
{ name: 'Response', Component: Response },
{ name: 'MessageMarkdown', Component: MessageMarkdown },
{ name: 'CodeBlock', Component: CodeBlock },
+ { name: 'Image', Component: Image },
]
diff --git a/apps/www/content/1.overview/1.Introduction.md b/apps/www/content/1.overview/1.Introduction.md
index aa02f2a..9bff12b 100644
--- a/apps/www/content/1.overview/1.Introduction.md
+++ b/apps/www/content/1.overview/1.Introduction.md
@@ -30,4 +30,7 @@ You can install it with:
:::ComponentLoader{label="Branch" componentName="Branch"}
:::
+:::ComponentLoader{label="Image" componentName="Image"}
+:::
+
View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.
diff --git a/apps/www/content/2.components/8.image.md b/apps/www/content/2.components/8.image.md
new file mode 100644
index 0000000..b37a56b
--- /dev/null
+++ b/apps/www/content/2.components/8.image.md
@@ -0,0 +1,117 @@
+---
+title: Image
+description:
+icon: lucide:image
+---
+
+The `Image` component displays AI-generated images from the AI SDK. It accepts a [`Experimental_GeneratedImage`](https://ai-sdk.dev/docs/reference/ai-sdk-core/generate-image#generateimage) object from the AI SDK's `generateImage` function and automatically renders it as an image.
+
+:::ComponentLoader{label="Image" componentName="Image"}
+:::
+
+## Install using CLI
+
+:::tabs{variant="card"}
+ ::div{label="ai-elements-vue"}
+ ```sh
+ npx ai-elements-vue@latest add image
+ ```
+ ::
+ ::div{label="shadcn-vue"}
+
+ ```sh
+ npx shadcn-vue@latest add https://registry.ai-elements-vue.com/image.json
+ ```
+ ::
+:::
+
+## Install Manually
+
+Copy and paste the following files into the same folder.
+
+:::code-group
+ ```vue [Image.vue]
+
+
+
+ ![]()
+
+ ```
+
+ ```ts [index.ts]
+ export { default as Image } from './Image.vue'
+ ```
+:::
+
+## Usage
+
+```vue
+
+
+
+
+
+```
+
+## Features
+
+- Accepts `Experimental_GeneratedImage` objects directly from the AI SDK
+- Automatically creates proper data URLs from base64-encoded image data
+- Supports all standard HTML image attributes
+- Responsive by default with `max-w-full h-auto` styling
+- Customizable with additional CSS classes
+- Includes proper TypeScript types for AI SDK compatibility
+
+## Props
+
+### ``
+
+:::field-group
+ ::field{name="alt" type="string" optional}
+ Alternative text for the image.
+ ::
+
+ ::field{name="class" type="string" optional}
+ Additional CSS classes applied to the `![]()
` element.
+ ::
+
+ ::field{name="[...props]" type="Experimental_GeneratedImage" optional}
+ The image data to display, as returned by the AI SDK.
+ ::
+:::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index b84c70d..1ae2f04 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -3,6 +3,7 @@ import {
ActionsHover,
Branch,
Conversation,
+ Image,
Message,
MessageMarkdown,
PromptInput,
@@ -26,4 +27,5 @@ export default defineNuxtPlugin((nuxtApp) => {
vueApp.component('PromptInput', PromptInput)
vueApp.component('Conversation', Conversation)
vueApp.component('Response', Response)
+ vueApp.component('Image', Image)
})
diff --git a/packages/elements/src/image/Image.vue b/packages/elements/src/image/Image.vue
new file mode 100644
index 0000000..f03498b
--- /dev/null
+++ b/packages/elements/src/image/Image.vue
@@ -0,0 +1,29 @@
+
+
+
+ ![]()
+
diff --git a/packages/elements/src/image/index.ts b/packages/elements/src/image/index.ts
new file mode 100644
index 0000000..da2bc81
--- /dev/null
+++ b/packages/elements/src/image/index.ts
@@ -0,0 +1 @@
+export { default as Image } from './Image.vue'
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index bdf9037..e484147 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -2,6 +2,7 @@ export * from './actions'
export * from './branch'
export * from './code-block'
export * from './conversation'
+export * from './image'
export * from './message'
export * from './prompt-input'
export * from './response'
diff --git a/packages/examples/src/image.vue b/packages/examples/src/image.vue
new file mode 100644
index 0000000..65113dc
--- /dev/null
+++ b/packages/examples/src/image.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 7b109c6..90a14f4 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -2,6 +2,7 @@ export { default as ActionsHover } from './actions-hover.vue'
export { default as Actions } from './actions.vue'
export { default as Branch } from './branch.vue'
export { default as Conversation } from './conversation.vue'
+export { default as Image } from './image.vue'
export { default as MessageMarkdown } from './message-markdown.vue'
export { default as Message } from './message.vue'
export { default as PromptInput } from './prompt-input.vue'
diff --git a/packages/registry/README.md b/packages/registry/README.md
index 1893eea..0c82b16 100644
--- a/packages/registry/README.md
+++ b/packages/registry/README.md
@@ -87,7 +87,7 @@ AI Elements Vue includes the following components:
| `actions` | ✅ 已完成 | Interactive action buttons for AI responses |
| `branch` | ✅ 已完成 | Branch visualization for conversation flows |
| `code-block` | ✅ 已完成 | Syntax-highlighted code display with copy functionality |
-| `image` | ❌ 未完成 | AI-generated image display component |
+| `image` | ✅ 已完成 | AI-generated image display component |
| `inline-citation` | ❌ 未完成 | Inline source citations |
| `loader` | ❌ 未完成 | Loading states for AI operations |
| `reasoning` | ❌ 未完成 | Display AI reasoning and thought processes |