diff --git a/src/content/docs/zh-cn/guides/images.mdx b/src/content/docs/zh-cn/guides/images.mdx
index 8c145d8a1666a..3721d9f562402 100644
--- a/src/content/docs/zh-cn/guides/images.mdx
+++ b/src/content/docs/zh-cn/guides/images.mdx
@@ -6,6 +6,7 @@ i18nReady: true
import Since from '~/components/Since.astro';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import Badge from '~/components/Badge.astro';
+import RecipeLinks from "~/components/RecipeLinks.astro";
Astro 为你提供了多种在网站上使用图像的方法，无论它们是本地存储在你的项目内，还是链接到外部 URL，或者在 CMS 或 CDN 中管理的！
@@ -604,6 +605,8 @@ import stars from "~/stars/docline.png";
`getImage()` 函数用于生成图像，这些图像将被用于除了直接在 HTML 中使用之外的其他地方，例如在 [API 路由](/zh-cn/core-concepts/endpoints/#服务器端点api-路由) 中。它还允许你创建自己的自定义 `` 组件。
+
+
`getImage()` 函数接受一个选项对象，其中包含与 [Image 组件](#属性) 相同的属性（除了 `alt`）。
```astro
diff --git a/src/content/docs/zh-cn/recipes/build-custom-img-component.mdx b/src/content/docs/zh-cn/recipes/build-custom-img-component.mdx
new file mode 100644
index 0000000000000..645df162bf6cf
--- /dev/null
+++ b/src/content/docs/zh-cn/recipes/build-custom-img-component.mdx
@@ -0,0 +1,126 @@
+---
+title: 构建自定义图像组件
+description: 了解如何使用 getImage 函数构建支持媒体查询的自定义图像组件
+i18nReady: true
+type: recipe
+---
+
+Astro 提供了两个内置组件，可用于显示和优化图像。`` 组件允许你显示响应式图像，并处理不同的格式和尺寸；而`` 组件则会优化你的图像，并允许你传入不同的格式和质量属性。
+
+当你需要使用一些 `` 和 `` 组件目前不支持的选项时，你可以使用 `getImage()` 函数来创建自定义组件。
+
+在本示例中，你将使用 [`getImage()` 函数](/zh-cn/guides/images/#使用-getimage-生成图像) 来创建自己的自定义图像组件，该组件基于媒体查询显示不同的源图像。
+
+## 操作步骤
+
+1. 创建一个新的 Astro 组件，并导入 `getImage()` 函数
+
+ ```astro title="src/components/MyCustomImageComponent.astro"
+ ---
+ import { getImage } from "astro:assets";
+ ---
+
+ ```
+
+2. 创建一个新的组件来处理自定义图片。`MyCustomComponent.astro` 将会从 `Astro.props` 中接收到三个 `props`。`mobileImgUrl` 和 `desktopImgUrl` 属性用于在不同的视口尺寸下创建图片，而 `alt` 属性用于设置图片的替代（alt）文本。这些属性将会在你渲染自定义图片组件的任何地方被传递。添加以下导入语句并定义你在组件中将使用的属性，你也可以使用 TypeScript 为属性添加类型定义。
+
+ ```astro title="src/components/MyCustomImageComponent.astro" ins={3, 11}
+ ---
+ import type { ImageMetadata } from "astro";
+ import { getImage } from "astro:assets";
+
+ interface Props {
+ mobileImgUrl: string | ImageMetadata;
+ desktopImgUrl: string | ImageMetadata;
+ alt: string;
+ }
+
+ const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
+ ---
+
+ ```
+
+3. 结合你需要的属性并调用 `getImage()` 函数来定义每个响应式图片。
+
+ ```astro title="src/components/MyCustomImageComponent.astro" ins={13-18, 20-25}
+ ---
+ import type { ImageMetadata } from "astro";
+ import { getImage } from "astro:assets";
+
+ interface Props {
+ mobileImgUrl: string | ImageMetadata;
+ desktopImgUrl: string | ImageMetadata;
+ alt: string;
+ }
+
+ const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
+
+ const mobileImg = await getImage({
+ src: mobileImgUrl,
+ format: "webp",
+ width: 200,
+ height: 200,
+ });
+
+ const desktopImg = await getImage({
+ src: desktopImgUrl,
+ format: "webp",
+ width: 800,
+ height: 200,
+ });
+ ---
+
+ ```
+
+4. 创建一个 `` 元素，它根据你期望的媒体查询生成包含不同图片的 `srcset`。
+
+ ```astro title="src/components/MyCustomImageComponent.astro" ins={28-32}
+ ---
+ import type { ImageMetadata } from "astro";
+ import { getImage } from "astro:assets";
+
+ interface Props {
+ mobileImgUrl: string | ImageMetadata;
+ desktopImgUrl: string | ImageMetadata;
+ alt: string;
+ }
+
+ const { mobileImgUrl, desktopImgUrl, alt } = Astro.props;
+
+ const mobileImg = await getImage({
+ src: mobileImgUrl,
+ format: "webp",
+ width: 200,
+ height: 200,
+ });
+
+ const desktopImg = await getImage({
+ src: desktopImgUrl,
+ format: "webp",
+ width: 800,
+ height: 200,
+ });
+ ---
+
+
+
+
+ 
+
+
+ ```
+
+5. 在任意 `.astro` 文件中导入并使用 `` 组件。确保传递了在不同视口大小下生成两个不同图片所需的属性：
+
+ ```astro title="src/pages/index.astro"
+ ---
+ import MyCustomImageComponent from "../components/MyCustomImageComponent.astro";
+ ---
+
+
+
+ ```