diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index fea4cf71da0865502cbe6c1dda2c1d8d60a1b141..3e835d9ad987b300a7e008c5c462e39c63fc9972 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -12,7 +12,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+/**
+ * 最佳实践：图片获取与保存实践
+ */
 import { image } from '@kit.ImageKit';
 import { PhotoPickerComponent, PickerController, photoAccessHelper, ReminderMode } from '@kit.MediaLibraryKit';
 import { cameraPicker, camera } from '@kit.CameraKit';
@@ -27,8 +29,8 @@ const TAG = 'IMAGE_APP';
 @Entry
 @Component
 struct Index {
-  @State path: string = getContext(this).filesDir + '/image.jpg';
-  @State pixelMapPath: string = getContext(this).filesDir + '/pixelMap.jpg';
+  @State path: string = this.getUIContext().getHostContext()!.filesDir + '/image.jpg';
+  @State pixelMapPath: string = this.getUIContext().getHostContext()!.filesDir + '/pixelMap.jpg';
   @State imageUri: string | undefined = undefined;
   @State imageSource: image.ImageSource | undefined = undefined;
   @State pixelMap: image.PixelMap | undefined = undefined;
@@ -77,17 +79,21 @@ struct Index {
         .width('100%')
         .height(40)
         .onClick(async () => {
+          // [Start pick_file]
           try {
             let pickerProfile: cameraPicker.PickerProfile =
               { cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK };
-            let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(getContext(this),
+            //Select the action of pulling up the camera to take pictures.
+            let pickerResult: cameraPicker.PickerResult = await cameraPicker.pick(this.getUIContext().getHostContext(),
               [cameraPicker.PickerMediaType.PHOTO], pickerProfile);
+            //Return the photo uri to the application.
             this.imageUri = pickerResult.resultUri ? pickerResult.resultUri : this.imageUri;
             hilog.info(0x0000, TAG, 'cameraPicker.pick succeed, uri: ' + JSON.stringify(pickerResult));
           } catch (error) {
             let err = error as BusinessError;
             hilog.error(0x0000, TAG, `cameraPicker.pick failed, error: ${err.code}, ${err.message}`);
           }
+          // [End pick_file]
           this.isShowGet = false;
         })
 
@@ -98,14 +104,14 @@ struct Index {
           try {
             let documentSelectOptions = new picker.DocumentSelectOptions();
             documentSelectOptions.maxSelectNumber = 1;
-            let documentPicker = new picker.DocumentViewPicker(getContext(this));
+            let documentPicker = new picker.DocumentViewPicker(this.getUIContext().getHostContext()!);
             documentPicker.select(documentSelectOptions).then((documentSelectResult: Array<string>) => {
               hilog.info(0x0000, TAG,
                 'DocumentViewPicker.select succeed, uri: ' + JSON.stringify(documentSelectResult));
               if (documentSelectResult[0].endsWith('.jpg') || documentSelectResult[0].endsWith('.png')) {
                 this.imageUri = documentSelectResult[0] ? documentSelectResult[0] : this.imageUri;
               } else {
-                promptAction.showToast({
+                this.getUIContext().getPromptAction().showToast({
                   message: $r('app.string.document_alert'),
                   duration: 2000
                 })
@@ -179,7 +185,7 @@ struct Index {
         .height(40)
         .onClick(async () => {
           if (!this.pixelMap) {
-            promptAction.showToast({
+            this.getUIContext().getPromptAction().showToast({
               message: $r('app.string.no_pixel_map_alert'),
               duration: 2000
             });
@@ -187,7 +193,7 @@ struct Index {
           }
 
           await pixelMap2File(this.pixelMap, this.path);
-          promptAction.showToast({
+          this.getUIContext().getPromptAction().showToast({
             message: $r('app.string.save_in_sandbox_success'),
             duration: 2000
           });
@@ -199,7 +205,7 @@ struct Index {
         .height(40)
         .onClick(async (event, result: SaveButtonOnClickResult) => {
           if (!this.pixelMap) {
-            promptAction.showToast({
+            this.getUIContext().getPromptAction().showToast({
               message: $r('app.string.no_pixel_map_alert'),
               duration: 2000
             });
@@ -209,12 +215,12 @@ struct Index {
           if (result === SaveButtonOnClickResult.SUCCESS) {
             try {
               await pixelMap2File(this.pixelMap, this.path);
-              let context = getContext();
+              let context = this.getUIContext().getHostContext();
               let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
               let assetChangeRequest: photoAccessHelper.MediaAssetChangeRequest =
                 photoAccessHelper.MediaAssetChangeRequest.createImageAssetRequest(context, this.path);
               await phAccessHelper.applyChanges(assetChangeRequest);
-              promptAction.showToast({
+              this.getUIContext().getPromptAction().showToast({
                 message: $r('app.string.save_in_gallery_success'),
                 duration: 2000
               });
@@ -258,7 +264,7 @@ struct Index {
             .height(40)
             .onClick(() => {
               if (!this.imageUri) {
-                promptAction.showToast({
+                this.getUIContext().getPromptAction().showToast({
                   message: $r('app.string.no_image_alert'),
                   duration: 2000
                 })
@@ -266,6 +272,7 @@ struct Index {
               }
 
               copyImg2Sandbox(this.imageUri, this.path).then(() => {
+                // [Start image_source]
                 this.imageSource = image.createImageSource(this.path);
                 this.imageSource.getImageInfo((error: BusinessError, imageInfo: image.ImageInfo) => {
                   if (error) {
@@ -274,15 +281,18 @@ struct Index {
                     hilog.info(0x0000, TAG, 'getImageInfo succeed, info: ' + JSON.stringify(imageInfo));
                   }
                 });
+                // [End image_source]
+                // [Start image_proper]
                 let key = [image.PropertyKey.IMAGE_WIDTH, image.PropertyKey.IMAGE_LENGTH, image.PropertyKey.F_NUMBER];
                 this.imageSource.getImageProperties(key).then((data) => {
                   hilog.info(0x0000, TAG, 'getImageProperties succeed, data: ' + JSON.stringify(data));
                 }).catch((error: BusinessError) => {
                   hilog.error(0x0000, TAG, 'getImageProperties failed, error: ' + JSON.stringify(error));
                 });
+                // [End image_proper]
               });
 
-              promptAction.showToast({
+              this.getUIContext().getPromptAction().showToast({
                 message: $r('app.string.get_image_info_success'),
                 duration: 2000
               })
@@ -293,7 +303,7 @@ struct Index {
             .height(40)
             .onClick(() => {
               if (!this.imageSource) {
-                promptAction.showToast({
+                this.getUIContext().getPromptAction().showToast({
                   message: $r('app.string.no_image_info_alert'),
                   duration: 2000
                 })
@@ -302,7 +312,7 @@ struct Index {
 
               this.imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
                 this.pixelMap = pixelMap;
-                promptAction.showToast({
+                this.getUIContext().getPromptAction().showToast({
                   message: $r('app.string.get_pixel_map_success'),
                   duration: 2000
                 })