diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md b/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md
index da62b6253..f5b979c0c 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/README_zh.md
@@ -127,6 +127,9 @@ entry/src/main/ets/
 |   |   |   |---scrollSample
 |   |   |   |   |---ScrollSample.ets
 |   |   |---textAndInput
+|   |   |   |---imageSpanSample
+|   |   |   |   |---ChangePanel.ets
+|   |   |   |   |---imageSpanSample.ets                  // 行内图像
 |   |   |   |---richTextSample
 |   |   |   |   |---RichTextSample.ets                   // 富文本
 |   |   |   |---spanSample
@@ -278,9 +281,9 @@ entry/src/main/ets/
             使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
 
         * 文本与输入
-            * 使用全局组件ShowToast，TitleBar，AttributeModificationTool,IntroductionTitle实现行内文本，文本输入，文本，富文本组件功能
-            *
-            使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
+            * 使用全局组件ShowToast，TitleBar，AttributeModificationTool,IntroductionTitle实现行内文本，行内图像，文本输入，文本，富文本组件功能
+            * 
+	    使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
 
         * 辅助
             * 使用全局组件TitleBar实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets
index 954e20161..51104b0ca 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/ComponentData.ets
@@ -152,6 +152,10 @@ const TEXT_AND_INPUT: ThirdLevelCategory =
     image: $r('app.media.ic_text_and_input'),
     title: $r('app.string.text_and_input'),
     childNodes: [
+      {
+        title: $r('app.string.image_span_title'),
+        url: 'pages/components/textAndInput/imageSpanSample/ImageSpanSample'
+      },
       {
         title: $r('app.string.span_title'),
         url: 'pages/components/textAndInput/spanSample/SpanSample'
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/imageSpanSample/ChangePanel.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/imageSpanSample/ChangePanel.ets
new file mode 100644
index 000000000..0e38da146
--- /dev/null
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/imageSpanSample/ChangePanel.ets
@@ -0,0 +1,92 @@
+/*
+ * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { CommonItemSlider, CommonItemSelect, CommonItemColorSelect } from '../../../../common/AttributeModificationTool'
+import { selectData } from '../../ComponentData'
+import { getStringArrayData } from '../../../../data/ResourceDataHandle'
+
+@Component
+export struct ChangeVerticalAlign {
+  @Link imageSpanAlignment: ImageSpanAlignment
+
+  build() {
+    Column() {
+      CommonItemSelect({
+        testId: 'alignment',
+	name: $r('app.string.image_span_vertical_align'),
+        selects: [$r('app.string.image_span_alignment_baseline'),
+        $r('app.string.image_span_alignment_center'),
+        $r('app.string.image_span_alignment_top'),
+        $r('app.string.image_span_alignment_bottom')],
+        callback: (index) => {
+          switch (index) {
+            case 0:
+              this.imageSpanAlignment = ImageSpanAlignment.BASELINE
+              break
+            case 1:
+              this.imageSpanAlignment = ImageSpanAlignment.CENTER
+              break
+            case 2:
+              this.imageSpanAlignment = ImageSpanAlignment.TOP
+              break
+            default:
+              this.imageSpanAlignment = ImageSpanAlignment.BOTTOM
+          }
+        }
+      })
+        .margin({ top: 12 })
+    }
+  }
+}
+@Component
+export struct ChangeObjectFit {
+  @Link imageFit : ImageFit
+
+  build() {
+    Column() {
+      CommonItemSelect({
+        testId: 'fit',
+	name: $r('app.string.image_span_object_fit'),
+        selects: [$r('app.string.image_fit_contain'),
+        $r('app.string.image_fit_auto'),
+        $r('app.string.image_fit_fill'),
+        $r('app.string.image_fit_none'),
+        $r('app.string.image_fit_cover')],
+        callback: (index) => {
+          switch (index) {
+            case 0:
+              this.imageFit = ImageFit.Contain
+              break
+            case 1:
+              this.imageFit = ImageFit.Auto
+              break
+            case 2:
+              this.imageFit = ImageFit.Fill
+              break
+            case 3:
+              this.imageFit = ImageFit.ScaleDown
+              break
+            case 4:
+              this.imageFit = ImageFit.None
+              break
+            default:
+              this.imageFit = ImageFit.Cover
+          }
+        }
+      })
+        .margin({ top: 12 })
+    }
+  }
+}
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/imageSpanSample/ImageSpanSample.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/imageSpanSample/ImageSpanSample.ets
new file mode 100644
index 000000000..e75fd9235
--- /dev/null
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/ets/pages/components/textAndInput/imageSpanSample/ImageSpanSample.ets
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2022-2023 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http:// www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { ChangeVerticalAlign, ChangeObjectFit } from './ChangePanel'
+import { IntroductionTitle } from '../../../../common/IntroductionTitle'
+import { TitleBar } from '../../../../common/TitleBar'
+
+@Extend(Column) function backgroundStyle() {
+  .size({ width: '100%' })
+  .margin({ top: 12 })
+  .padding(12)
+  .borderRadius(24)
+  .justifyContent(FlexAlign.SpaceBetween)
+  .backgroundColor(Color.White)
+}
+
+@Entry
+@Component
+struct ImageSpanSample {
+  @State imageSpanAlignment: ImageSpanAlignment = ImageSpanAlignment.BOTTOM
+  @State imageFit: ImageFit = ImageFit.Cover
+
+  build() {
+    Column() {
+      TitleBar({ title: $r('app.string.image_span_title') })
+      Scroll() {
+        Column() {
+          IntroductionTitle({ introduction: $r('app.string.image_span_and_span') })
+          Column() {
+            Text(){
+              Span($r('app.string.text_content_en_first'))
+              ImageSpan($r('app.media.banner'))
+                .verticalAlign(this.imageSpanAlignment)
+                .objectFit(this.imageFit)
+                .width(400)
+                .height(350)
+                .border({ width: 1 })
+              Span($r('app.string.text_content_en_last'))
+            }
+          }
+          .backgroundStyle()
+
+          IntroductionTitle({ introduction: $r('app.string.image_span_vertical_align_and_object_fit') })
+          Column() {
+            ChangeVerticalAlign({
+              imageSpanAlignment: $imageSpanAlignment
+            })
+            ChangeObjectFit({
+              imageFit: $imageFit
+            })
+          }
+          .backgroundStyle()
+          .margin({ bottom: 80 })
+        }
+        .constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least
+      }
+      .height('100%')
+      .padding({ left: 12, right: 12 })
+    }
+    .backgroundColor($r('app.color.background_shallow_grey'))
+  }
+}
\ No newline at end of file
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json
index ad6fb341b..7ac674870 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/element/string.json
@@ -1082,6 +1082,67 @@
       "name": "span_decoration_overline",
       "value": "Overline"
     },
+    //ImageSpan
+    {
+      "name": "image_span_title",
+      "value": "Image Span"
+    },
+    {
+      "name": "image_span_vertical_align",
+      "value": "Vertical Align"
+    },
+    {
+      "name": "image_span_alignment_baseline",
+      "value": "Baseline"
+    },
+    {
+      "name": "image_span_alignment_bottom",
+      "value": "Bottom"
+    },
+    {
+      "name": "image_span_alignment_center",
+      "value": "Center"
+    },
+    {
+      "name": "image_span_alignment_top",
+      "value": "Top"
+    },
+    {
+      "name": "image_span_object_fit",
+      "value": "Object Fit"
+    },
+    {
+      "name": "image_fit_contain",
+      "value": "Contain"
+    },
+    {
+      "name": "image_fit_auto",
+      "value": "Auto"
+    },
+    {
+      "name": "image_fit_fill",
+      "value": "Fill"
+    },
+    {
+      "name": "image_fit_none",
+      "value": "None"
+    },
+    {
+      "name": "image_fit_scale_down",
+      "value": "Scale Down"
+    },
+    {
+      "name": "image_fit_cover",
+      "value": "Cover"
+    },
+    {
+      "name": "image_span_and_span",
+      "value": "image span and span"
+    },
+    {
+      "name": "image_span_vertical_align_and_object_fit",
+      "value": "image span vertical align and object fit"
+    },
     // Text
     {
       "name": "text_title",
@@ -1095,6 +1156,14 @@
       "name": "text_content_en",
       "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life."
     },
+    {
+      "name": "text_content_en_first",
+      "value": "Steel is tempered in fire and sharp cooling, so it can be hard and not afraid of anything. "
+    },
+    {
+      "name": "text_content_en_last",
+      "value": "It is also in this way that our generation has been tempered in struggles and terrible trials, learning not to succumb to life. "
+    },
     {
       "name": "text_text_align_center",
       "value": "Center"
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json
index ee7a46a06..d87f779dc 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/base/profile/main_pages.json
@@ -11,6 +11,7 @@
     "pages/components/buttonAndSelection/toggleSample/ToggleSample",
     "pages/components/informationPresentationAndDynamicEffects/qrCodeSample/QRCodeSample",
     "pages/animations/interpolationCalculationSample/InterpolationCalculationSample",
+    "pages/components/textAndInput/imageSpanSample/ImageSpanSample",
     "pages/components/textAndInput/spanSample/SpanSample",
     "pages/components/textAndInput/textInputSample/TextInputSample",
     "pages/components/textAndInput/textSample/TextSample",
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json
index f1b979584..e34e8f173 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/en/element/string.json
@@ -1053,6 +1053,67 @@
       "name": "span_decoration_overline",
       "value": "Overline"
     },
+    // ImageSpan
+    {
+      "name": "image_span_title",
+      "value": "Image Span"
+    },
+    {
+      "name": "image_span_vertical_align",
+      "value": "Vertical Align"
+    },
+    {
+      "name": "image_span_alignment_baseline",
+      "value": "Baseline"
+    },
+    {
+      "name": "image_span_alignment_bottom",
+      "value": "Bottom"
+    },
+    {
+      "name": "image_span_alignment_center",
+      "value": "Center"
+    },
+    {
+      "name": "image_span_alignment_top",
+      "value": "Top"
+    },
+    {
+      "name": "image_span_object_fit",
+      "value": "Object Fit"
+    },
+    {
+      "name": "image_fit_contain",
+      "value": "Contain"
+    },
+    {
+      "name": "image_fit_auto",
+      "value": "Auto"
+    },
+    {
+      "name": "image_fit_fill",
+      "value": "Fill"
+    },
+    {
+      "name": "image_fit_none",
+      "value": "None"
+    },
+    {
+      "name": "image_fit_scale_down",
+      "value": "Scale Down"
+    },
+    {
+      "name": "image_fit_cover",
+      "value": "Cover"
+    },
+    {
+      "name": "image_span_and_span",
+      "value": "image span and span"
+    },
+    {
+      "name": "image_span_vertical_align_and_object_fit",
+      "value": "image span vertical align and object fit"
+    },
     // Text
     {
       "name": "text_title",
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json
index fcb2640b4..cd671aee5 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/main/resources/zh/element/string.json
@@ -1013,6 +1013,67 @@
       "name": "span_decoration_color",
       "value": "装饰线颜色"
     },
+    //ImageSpan
+    {
+      "name": "image_span_title",
+      "value": "ImageSpan 行内图像"
+    },
+    {
+      "name": "image_span_vertical_align",
+      "value": "设置跨度对齐方式"
+    },
+    {
+      "name": "image_span_alignment_baseline",
+      "value": "基线"
+    },
+    {
+      "name": "image_span_alignment_bottom",
+      "value": "底部"
+    },
+    {
+      "name": "image_span_alignment_center",
+      "value": "中心"
+    },
+    {
+      "name": "image_span_alignment_top",
+      "value": "顶部"
+    },
+    {
+      "name": "image_span_object_fit",
+      "value": "设置图像缩放类型"
+    },
+    {
+      "name": "image_fit_contain",
+      "value": "包含"
+    },
+    {
+      "name": "image_fit_auto",
+      "value": "自适应显示"
+    },
+    {
+      "name": "image_fit_fill",
+      "value": "填满"
+    },
+    {
+      "name": "image_fit_none",
+      "value": "保持大小并将其显示在中心"
+    },
+    {
+      "name": "image_fit_scale_down",
+      "value": "按比例缩小或保持不变"
+    },
+    {
+      "name": "image_fit_cover",
+      "value": "掩蔽"
+    },
+    {
+      "name": "image_span_and_span",
+      "value": "文本图像混合显示"
+    },
+    {
+      "name": "image_span_vertical_align_and_object_fit",
+      "value": "设置行内图像的跨度对齐方式和缩放类型"
+    },
     // Text
     {
       "name": "text_title",
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets
index 2d4f858b3..24d2eeacc 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/ets/test/Ability.test.ets
@@ -1013,6 +1013,47 @@ export default function abilityTest() {
         Logger.info(BUNDLE + testName + ' end');
       })
 
+      /**
+       * ImageSpan 行内图像
+       */
+      it(BUNDLE + 'ImageSpanFunction_001', 0, async function () {
+        let testName = 'ImageSpanFunction';
+        Logger.info(BUNDLE + testName + ' begin');
+
+        let driver: Driver = Driver.create();
+        await driver.delayMs(DELAY_TIME);
+
+        // 进入Span 行内文本
+        let atom = await manager.getStringValue($r('app.string.image_span_title'));
+        let button = await driver.findComponent(ON.text(atom));
+        if (!button) {
+          // 如果没展开 就展开
+          await checkButtonAndClickWithText(await manager.getStringValue($r('app.string.text_and_input')));
+        }
+        await checkButtonAndClickWithText(atom);
+
+        // 展开跨度对齐方式
+        await checkButtonAndClickWithID('alignment');
+
+        // 选择一个center
+        let center = await manager.getStringValue($r('app.string.image_span_alignment_center'));
+        await checkButtonAndClickWithText(center);
+
+        // 展开图像缩放类型
+        await checkButtonAndClickWithID('fit');
+
+        // 选择一个contain
+        let contain = await manager.getStringValue($r('app.string.image_fit_contain'));
+        await checkButtonAndClickWithText(contain);
+
+        // 返回
+        let backBtn = await driver.findComponent(ON.id('backBtn'));
+        await backBtn.click();
+        await driver.delayMs(500);
+
+        Logger.info(BUNDLE + testName + ' end');
+      })
+
       /**
        * Span 行内文本
        */
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json
index 8c344036e..7d1a5cad5 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/base/element/string.json
@@ -1175,6 +1175,19 @@
       "name": "text_text_case_lowercase",
       "value": "Lowercase"
     },
+    // ImageSpan
+    {
+      "name": "image_span_title",
+      "value": "Image Span"
+    },
+    {
+      "name": "image_span_alignment_center",
+      "value": "Center"
+    },
+    {
+      "name": "image_fit_contain",
+      "value": "Contain"
+    },
     // TextInput
     {
       "name": "text_input_title",
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json
index 60fd61f27..77860e151 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/en/element/string.json
@@ -1085,6 +1085,19 @@
       "name": "text_text_case_lowercase",
       "value": "Lowercase"
     },
+    // ImageSpan
+    {
+      "name": "image_span_title",
+      "value": "Image Span"
+    },
+    {
+      "name": "image_span_alignment_center",
+      "value": "Center"
+    },
+    {
+      "name": "image_fit_contain",
+      "value": "Contain"
+    },
     // TextInput
     {
       "name": "text_input_title",
diff --git a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json
index 214477b29..df333d156 100644
--- a/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json
+++ b/code/UI/ArkTsComponentCollection/ComponentCollection/entry/src/ohosTest/resources/zh/element/string.json
@@ -1045,6 +1045,19 @@
       "name": "text_text_case_lowercase",
       "value": "小写"
     },
+    // ImageSpan
+    {
+      "name": "image_span_title",
+      "value": "ImageSpan 行内图像"
+    },
+    {
+      "name": "image_span_alignment_center",
+      "value": "中心"
+    },
+    {
+      "name": "image_fit_contain",
+      "value": "包含"
+    },
     // TextInput
     {
       "name": "text_input_title",