diff --git a/zh-cn/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md b/zh-cn/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md
index 7fc857ba674460bf063726d39f960da376de51d6..2b35b21cf982b3b70d91d2f4ad03a051ab87a4d3 100644
--- a/zh-cn/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md
+++ b/zh-cn/application-dev/quick-start/arkts-dynamic-ui-elememt-building.md
@@ -22,7 +22,8 @@ struct CompB {
 
   build() {
     Column() {
-      Button(this.CompValue);
+      Button(this.CompValue)
+        .margin(5)
     }
   }
 }
@@ -81,6 +82,8 @@ struct CompA {
   }
 }
 ```
+![builder](figures/builder.PNG)
+
 ## @BuilderParam<sup>8+<sup>
 
 @BuilderParam装饰器用于修饰自定义组件内函数类型的属性（例如：`@BuilderParam noParam: () => void`），并且在初始化自定义组件时被@BuilderParam修饰的属性必须赋值。
@@ -151,6 +154,8 @@ struct CustomContainerUser {
 }
 ```
 
+![builder1](figures/builder1.PNG)
+
 ### 尾随闭包初始化组件
 
 在自定义组件中使用@BuilderParam修饰的属性时也可通过尾随闭包进行初始化（在初始化自定义组件时，组件后紧跟一个大括号“{}”形成尾随闭包场景（`CustomContainer(){}`）。开发者可把尾随闭包看做一个容器，向其中填充内容，如在闭包内增加组件（`{Column(){...}`），闭包内语法规范与build函数一致。此场景下自定义组件内有且仅有一个使用@BuilderParam修饰的属性。
@@ -204,6 +209,8 @@ struct CustomContainerUser {
 }
 ```
 
+![builder2](figures/builder2.gif)
+
 ## @Styles
 
 ArkTS为了避免开发者对重复样式的设置，通过@Styles装饰器可以将多个样式设置提炼成一个方法，直接在组件声明时调用，通过@Styles装饰器可以快速定义并复用自定义样式。当前@Styles仅支持通用属性。
@@ -246,6 +253,8 @@ struct FancyUse {
 }
 ```
 
+![styles](figures/styles.PNG)
+
 @Styles还可以在[StateStyles](../reference/arkui-ts/ts-universal-attributes-polymorphic-style.md)属性内部使用，在组件处于不同的状态时赋予相应的属性。
 
 在StateStyles内可以直接调用组件外定义的@Styles方法，但需要通过this关键字调用组件内定义的@Styles方法。
@@ -284,6 +293,8 @@ struct FancyUse {
 }
 ```
 
+![styles1](figures/styles1.gif)
+
 ## @Extend
 
 @Extend装饰器将新的属性方法添加到Text、Column、Button等内置组件上，通过@Extend装饰器可以快速地扩展原生组件。@Extend不能定义在自定义组件struct内。
@@ -319,6 +330,8 @@ struct FancyUse {
 > - @Extend装饰器不能定义在自定义组件struct内。
 > - @Extend装饰器内仅支持属性方法设置。
 
+![extend](figures/extend.PNG)
+
 ## @CustomDialog
 
 @CustomDialog装饰器用于装饰自定义弹窗组件，使得弹窗可以动态设置内容及样式。
@@ -369,4 +382,4 @@ struct CustomDialogUser {
 }
 ```
 
-![custom-dialog-demo](figures/custom-dialog-demo.gif)
\ No newline at end of file
+![customdialog](figures/customdialog.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/quick-start/arkts-rendering-control.md b/zh-cn/application-dev/quick-start/arkts-rendering-control.md
index fbbc9682b2895c74a255f75554c5f8c5ed7ea9ef..08663ab440ede2aa39dcc722da1fdb54217942a3 100644
--- a/zh-cn/application-dev/quick-start/arkts-rendering-control.md
+++ b/zh-cn/application-dev/quick-start/arkts-rendering-control.md
@@ -91,6 +91,8 @@ struct MyComponent {
 }
 ```
 
+![forEach1](figures/forEach1.gif)
+
 ## 数据懒加载
 
 通过数据懒加载（LazyForEach）从提供的数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。
@@ -212,7 +214,7 @@ class BasicDataSource implements IDataSource {
 
 class MyDataSource extends BasicDataSource {
   // 初始化数据列表
-  private dataArray: string[] = ['/path/image0', '/path/image1', '/path/image2', '/path/image3']
+  private dataArray: string[] = ['/path/image0.png', '/path/image1.png', '/path/image2.png', '/path/image3.png']
 
   public totalCount(): number {
     return this.dataArray.length
@@ -249,7 +251,7 @@ struct MyComponent {
         }
         .onClick(() => {
           // 每点击一次列表项，数据增加一项
-          this.data.pushData('/path/image' + this.data.totalCount())
+          this.data.pushData('/path/image' + this.data.totalCount() + '.png')
         })
       }, item => item)
     }
@@ -275,4 +277,6 @@ struct MyComponent {
 >   LazyForEach(dataSource, 
 >     item => Text(`${item.i}. item.data.label`)),
 >     item => item.data.id.toString())
->   ```
\ No newline at end of file
+>   ```
+
+![lazyForEach](figures/lazyForEach.gif)
\ No newline at end of file
diff --git a/zh-cn/application-dev/quick-start/arkts-restrictions-and-extensions.md b/zh-cn/application-dev/quick-start/arkts-restrictions-and-extensions.md
index 18c508d17c33f91453e54b59982c410f3ae640b7..ab92bc000665ebbaa9b0cccb0bff61df1ff8bc96 100644
--- a/zh-cn/application-dev/quick-start/arkts-restrictions-and-extensions.md
+++ b/zh-cn/application-dev/quick-start/arkts-restrictions-and-extensions.md
@@ -42,6 +42,8 @@ struct bindPopupPage {
 }
 ```
 
+![popup](figures/popup.gif)
+
 ## 状态变量数据类型声明使用限制
 
 @State、@Provide、 @Link和@Consume四种状态变量的数据类型声明只能由简单数据类型或引用数据类型的其中一种构成。
@@ -68,4 +70,6 @@ struct IndexPage {
     .height('100%')
   }
 }
-```
\ No newline at end of file
+```
+
+![hello](figures/hello.PNG)
\ No newline at end of file
diff --git a/zh-cn/application-dev/quick-start/arkts-state-mgmt-application-level.md b/zh-cn/application-dev/quick-start/arkts-state-mgmt-application-level.md
index aa8544621b51b4326dd020417a44be9ba07b2249..e8c2efef8ef438475188c015581137d506a6ecfd 100644
--- a/zh-cn/application-dev/quick-start/arkts-state-mgmt-application-level.md
+++ b/zh-cn/application-dev/quick-start/arkts-state-mgmt-application-level.md
@@ -80,6 +80,7 @@ struct ComponentA {
 }
 ```
 
+![appstorage](figures/appstorage.gif)
 
 ## [LocalStorage](../reference/arkui-ts/ts-state-management.md#localstorage9)
 
@@ -188,6 +189,8 @@ struct LocalStorageComponentProp {
 }
 ```
 
+![appstorage1](figures/appstorage1.gif)
+
 ### 示例2（在Entry页面定义LocalStorage）
 
 ```ts
@@ -223,6 +226,8 @@ struct Child {
 }
 ```
 
+![appstorage2](figures/appstorage2.gif)
+
 ## [PersistentStorage](../reference/arkui-ts/ts-state-management.md#persistentstorage)
 
 PersistentStorage提供了一些静态方法用来管理应用持久化数据，可以将特定标记的持久化数据链接到AppStorage中，并由AppStorage接口访问对应持久化数据，或者通过@StorageLink装饰器来访问对应key的变量。 
@@ -260,6 +265,8 @@ struct PersistentComponent {
 }
 ```
 
+![appstorage3](figures/appstorage3.gif)
+
 ## [Environment](../reference/arkui-ts/ts-state-management.md#environment)
 
 Environment是框架在应用程序启动时创建的单例对象，它为AppStorage提供了一系列应用程序需要的环境状态数据，这些数据描述了应用程序运行的设备环境，包括系统语言、深浅色模式等等。Environment及其属性是不可变的，所有数据类型均为简单类型。如下示例展示了从Environment获取系统是否开启无障碍屏幕朗读：
diff --git a/zh-cn/application-dev/quick-start/figures/appstorage.gif b/zh-cn/application-dev/quick-start/figures/appstorage.gif
index 907447553819293cf3e7e143aec39116c4166d8d..74fb655faba656a8542c8b8dd1619c307565dbac 100644
Binary files a/zh-cn/application-dev/quick-start/figures/appstorage.gif and b/zh-cn/application-dev/quick-start/figures/appstorage.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/appstorage1.gif b/zh-cn/application-dev/quick-start/figures/appstorage1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1b61274beda905c252825ad7e821aec92b93cdc0
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/appstorage1.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/appstorage2.gif b/zh-cn/application-dev/quick-start/figures/appstorage2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..c56396af8365fd8fcf8b5d019c25d628828303fc
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/appstorage2.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/appstorage3.gif b/zh-cn/application-dev/quick-start/figures/appstorage3.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1538d1218f4f0ed987e50b4bb97d9abdb56781dc
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/appstorage3.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/builder.PNG b/zh-cn/application-dev/quick-start/figures/builder.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..2f7d50693ba58a78fb0c42b12cf4d924d398dcd4
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/builder.PNG differ
diff --git a/zh-cn/application-dev/quick-start/figures/builder1.PNG b/zh-cn/application-dev/quick-start/figures/builder1.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..4b78a289a0878cd120370ce1eaae8ef66c56a591
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/builder1.PNG differ
diff --git a/zh-cn/application-dev/quick-start/figures/builder2.gif b/zh-cn/application-dev/quick-start/figures/builder2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9b79d29ea8d25e4838f7bf798b00e7162d9ed3e7
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/builder2.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/customDialog.gif b/zh-cn/application-dev/quick-start/figures/customDialog.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e3788315f506df46d95b321a910cf81092677202
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/customDialog.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/extend.PNG b/zh-cn/application-dev/quick-start/figures/extend.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..cf1c87c65db58084c8a62124c1f41f2b829c90cb
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/extend.PNG differ
diff --git a/zh-cn/application-dev/quick-start/figures/forEach1.gif b/zh-cn/application-dev/quick-start/figures/forEach1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..8e9e35e98b8c5fec6baf58997ae78992a554e069
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/forEach1.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/hello.PNG b/zh-cn/application-dev/quick-start/figures/hello.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..8098a2fc4ae0322c1a5b5a12d7cc0eb72ad073f5
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/hello.PNG differ
diff --git a/zh-cn/application-dev/quick-start/figures/lazyForEach.gif b/zh-cn/application-dev/quick-start/figures/lazyForEach.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e8f92b92fd63c572e22964d8caa6132d318cf5bd
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/lazyForEach.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/popup.gif b/zh-cn/application-dev/quick-start/figures/popup.gif
new file mode 100644
index 0000000000000000000000000000000000000000..35c61c38947aea3c09c49e240fcc19bdb91e943f
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/popup.gif differ
diff --git a/zh-cn/application-dev/quick-start/figures/styles.PNG b/zh-cn/application-dev/quick-start/figures/styles.PNG
new file mode 100644
index 0000000000000000000000000000000000000000..46e3c761e72854f16a78e7cb3a0518a3d39e79e5
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/styles.PNG differ
diff --git a/zh-cn/application-dev/quick-start/figures/styles1.gif b/zh-cn/application-dev/quick-start/figures/styles1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..7b72040aeaea3260bf9ccfdce0495d911d5752be
Binary files /dev/null and b/zh-cn/application-dev/quick-start/figures/styles1.gif differ