diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample001.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample001.ets
new file mode 100644
index 0000000000000000000000000000000000000000..81b50e1bbd02fade1950412c51d656986581facf
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample001.ets
@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/**
+ * Image HDR Test Component
+ *
+ * This component demonstrates how to test and display High Dynamic Range (HDR) images using the `dynamicRangeMode`
+ * property. It supports switching between different dynamic range modes, including HIGH, CONSTRAINT, and STANDARD,
+ * to visualize how image rendering adapts to various display capabilities. Users can toggle image visibility and
+ * dynamically switch between HDR modes via interactive buttons.
+ */
+@Entry
+@Component
+struct ImageHDRTest {
+  @State show: Boolean = true
+  @State het: number = 216
+  @State wid: number = 384
+  @State parmDynamicRangeModeStr: string[] = [
+    'dynamicRangeMode = HIGH','dynamicRangeMode = CONSTRAINT','dynamicRangeMode = STANDARD'
+  ]
+  @State parmDynamicRangeMode: DynamicRangeMode[] = [
+    DynamicRangeMode.HIGH, DynamicRangeMode.CONSTRAINT, DynamicRangeMode.STANDARD
+  ]
+  @State parm: DynamicRangeMode | undefined |number = DynamicRangeMode.HIGH
+  @State idx1: number = 0
+  build() {
+    Column(){
+      Blank()
+        .height(100)
+      Text('Image的HDR测试Demo')
+        .fontSize(20)
+        .fontWeight(FontWeight.Bold)
+      Divider()
+      Button('IsShow')
+        .onClick(() => {
+          if (this.show) {
+            this.show = false;
+          } else {
+            this.show = true;
+          }
+        })
+      Divider()
+      Button('Change idx_DynamicRangeMode++ = ' + this.idx1)
+        .onClick(()=>{
+          this.idx1 = (this.idx1 + 1) % 3
+        })
+      if (this.show) {
+        Divider()
+        Text(this.parmDynamicRangeModeStr[this.idx1])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Image($r('app.media.JPEGVividSingle'))
+          .height(this.het)
+          .width(this.wid)
+          .dynamicRangeMode(this.parmDynamicRangeMode[this.idx1])
+      }
+    }.backgroundColor('#CCCCCC').width('100%').height('100%')
+  }
+}
\ No newline at end of file
diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample002.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample002.ets
new file mode 100644
index 0000000000000000000000000000000000000000..fa87f30b586a8f2010372c986f9e06175436c39b
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample002.ets
@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/**
+ * Image Attribute Test Component
+ *
+ * This component demonstrates the usage of various image attributes such as dynamic range mode,
+ * enhanced image quality, draggable behavior, and custom attribute modifiers.
+ * It allows users to dynamically change image properties through interactive buttons.
+ * The ImageModifier class applies a set of predefined attributes including dynamicRangeMode,
+ * borderRadius, and enhancedImageQuality to the Image component.
+ */
+import { BusinessError } from '@ohos.base';
+import image from '@ohos.multimedia.image';
+
+class ImageModifier implements AttributeModifier<ImageAttribute> {
+  public value: DynamicRangeMode = DynamicRangeMode.HIGH;
+  public bo: number = 10;
+  public quality: image.ResolutionQuality = image.ResolutionQuality.MEDIUM;
+
+  applyNormalAttribute(instance: ImageAttribute): void {
+    instance.dynamicRangeMode(this.value);
+    instance.borderRadius(this.bo);
+    instance.enhancedImageQuality(this.quality);
+  }
+}
+
+@Entry
+@Component
+struct DarkModeTest {
+  @State modifier: ImageModifier = new ImageModifier();
+  @State show: Boolean = true;
+  @State het: number = 216;
+  @State wid: number = 384;
+  @State opacityValue: number = 0.4;
+  @State parmDynamicRangeModeStr: string[] = [
+    'dynamicRangeMode = HIGH',
+    'dynamicRangeMode = CONSTRAINT',
+    'dynamicRangeMode = STANDARD'
+  ];
+  @State parmImageQualityStr: string[] = [
+    'ResolutionQuality.LOW',
+    'ResolutionQuality.MEDIUM',
+    'ResolutionQuality.HIGH'
+  ];
+  @State parmRenderModeStr: string[] = [
+    'ImageRenderMode.Origin',
+    'ImageRenderMode.Template'
+  ];
+  @State parmDynamicRangeMode: DynamicRangeMode[] = [
+    DynamicRangeMode.HIGH,
+    DynamicRangeMode.CONSTRAINT,
+    DynamicRangeMode.STANDARD
+  ];
+  @State parmImageQuality: image.ResolutionQuality[] = [
+    image.ResolutionQuality.LOW,
+    image.ResolutionQuality.MEDIUM,
+    image.ResolutionQuality.HIGH
+  ];
+  @State parmRenderMode: ImageRenderMode[] = [
+    ImageRenderMode.Original,
+    ImageRenderMode.Template
+  ];
+  @State parmDraggable: boolean[] = [
+    true,
+    false
+  ];
+  @State parmDraggableStr: string[] = [
+    'draggable = true',
+    'draggable = false'
+  ];
+  @State parm: DynamicRangeMode | undefined | number = DynamicRangeMode.HIGH;
+  @State idx1: number = 0;
+  @State idx2: number = 0;
+  @State idx3: number = 0;
+
+  build() {
+    Column() {
+      Button('IsShow')
+        .onClick(() => {
+          if (this.show) {
+            this.show = false;
+          } else {
+            this.show = true;
+          }
+        });
+      Divider();
+      Button('Change idx_DynamicRangeMode++ = ' + this.idx1)
+        .onClick(() => {
+          this.idx1 = (this.idx1 + 1) % 3;
+        });
+      Divider();
+      Button('Change idx_ResolutionQuality++ = ' + this.idx2)
+        .onClick(() => {
+          this.idx2 = (this.idx2 + 1) % 3;
+        });
+      Divider();
+      Button('Change idx_ImageRenderMode++ = ' + this.idx3)
+        .onClick(() => {
+          this.idx3 = (this.idx3 + 1) % 6;
+        });
+      Divider();
+      Button('Change idx_draggable = ' + this.idx3)
+        .onClick(() => {
+          this.idx3 = (this.idx3 + 1) % 2;
+        });
+      if (this.show) {
+        Divider();
+        Text(this.parmDynamicRangeModeStr[this.idx1])
+          .fontWeight(FontWeight.Bolder);
+        Divider();
+        Text(this.parmImageQualityStr[this.idx2])
+          .fontWeight(FontWeight.Bolder);
+        Divider();
+        Text(this.parmDraggableStr[this.idx3])
+          .fontWeight(FontWeight.Bolder);
+        Divider();
+        Image($r('app.media.JPEGVividSingle'))
+          .height(this.het)
+          .width(this.wid)
+          .dynamicRangeMode(this.parmDynamicRangeMode[this.idx1])
+          .enhancedImageQuality(this.parmImageQuality[this.idx2])
+          .draggable(this.parmDraggable[this.idx3]);
+      }
+    }
+    .backgroundColor('#CCCCCC')
+    .width('100%')
+    .height('100%');
+  }
+}
\ No newline at end of file
diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample003.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample003.ets
new file mode 100644
index 0000000000000000000000000000000000000000..446f570250e0635efc4f5a5c0960833f8284f81b
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample003.ets
@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/**
+ * Image Attribute Test Component with fitOriginalSize
+ *
+ * This component demonstrates the usage of various image attributes such as dynamic range mode,
+ * and enhanced image quality. It also sets the `fitOriginalSize` attribute, which determines
+ * whether the image should be displayed in its original size or scaled to fit within the specified
+ * dimensions (height and width). The `fitOriginalSize` property can be toggled on and off via
+ * interactive buttons, allowing users to see how it affects the rendering of the image.
+ */
+import { BusinessError } from '@ohos.base';
+import image from '@ohos.multimedia.image';
+
+class ImageModifier implements AttributeModifier<ImageAttribute> {
+  public value: DynamicRangeMode = DynamicRangeMode.HIGH
+  public bo: number = 10
+  public quality: image.ResolutionQuality = image.ResolutionQuality.MEDIUM
+
+  applyNormalAttribute(instance: ImageAttribute): void {
+    instance.dynamicRangeMode(this.value)
+    instance.borderRadius(this.bo)
+    instance.enhancedImageQuality(this.quality)
+  }
+}
+
+@Entry
+@Component
+struct DarkModeTest {
+  @State modifier: ImageModifier = new ImageModifier()
+  @State show: Boolean = true
+  @State het: number = 216
+  @State wid: number = 384
+  @State opacityValue: number = 0.4
+  @State parmDynamicRangeModeStr: string[] = [
+    'dynamicRangeMode = HIGH', 'dynamicRangeMode = CONSTRAINT', 'dynamicRangeMode = STANDARD'
+  ]
+  @State parmImageQualityStr: string[] = [
+    'ResolutionQuality.LOW', 'ResolutionQuality.MEDIUM', 'ResolutionQuality.HIGH'
+  ]
+  @State parmRenderModeStr: string[] = [
+    'ImageRenderMode.Origin', 'ImageRenderMode.Template'
+  ]
+  @State parmDynamicRangeMode: DynamicRangeMode[] = [
+    DynamicRangeMode.HIGH, DynamicRangeMode.CONSTRAINT, DynamicRangeMode.STANDARD
+  ]
+  @State parmImageQuality: image.ResolutionQuality[] = [
+    image.ResolutionQuality.LOW, image.ResolutionQuality.MEDIUM, image.ResolutionQuality.HIGH
+  ]
+  @State parmRenderMode: ImageRenderMode[] = [
+    ImageRenderMode.Original, ImageRenderMode.Template
+  ]
+  @State parmInterpolation: ImageInterpolation[] = [
+    ImageInterpolation.None, ImageInterpolation.Low,
+    ImageInterpolation.Medium, ImageInterpolation.High
+  ]
+  @State parmInterpolationStr: string[] = [
+    'ImageInterpolation.None', 'ImageInterpolation.Low',
+    'ImageInterpolation.Medium', 'ImageInterpolation.High'
+  ]
+  @State parm: DynamicRangeMode | undefined | number = DynamicRangeMode.HIGH
+  @State idx1: number = 0
+  @State idx2: number = 0
+  @State idx3: number = 0
+
+  build() {
+    Column() {
+      Button('IsShow')
+        .onClick(() => {
+          if (this.show) {
+            this.show = false;
+          } else {
+            this.show = true;
+          }
+        })
+      Divider()
+      Button('Change idx_DynamicRangeMode++ = ' + this.idx1)
+        .onClick(() => {
+          this.idx1 = (this.idx1 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ResolutionQuality++ = ' + this.idx2)
+        .onClick(() => {
+          this.idx2 = (this.idx2 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ImageRenderMode++ = ' + this.idx3)
+        .onClick(() => {
+          this.idx3 = (this.idx3 + 1) % 4
+        })
+      Divider()
+      Button('Change fitOriginalSize = ' + this.idx3)
+        .onClick(() => {
+          this.idx3 = (this.idx3 + 1) % 2
+        })
+      if (this.show) {
+        Divider()
+        Text(this.parmDynamicRangeModeStr[this.idx1])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmImageQualityStr[this.idx2])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmInterpolationStr[this.idx3])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Image($r('app.media.JPEGVividSingle'))
+          .height(this.het)
+          .width(this.wid)
+          .dynamicRangeMode(this.parmDynamicRangeMode[this.idx1])
+          .enhancedImageQuality(this.parmImageQuality[this.idx2])
+          .fitOriginalSize(Boolean(this.idx3))
+      }
+    }.backgroundColor('#CCCCCC').width('100%').height('100%')
+  }
+}
\ No newline at end of file
diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample004.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample004.ets
new file mode 100644
index 0000000000000000000000000000000000000000..58f9074d91f7ca5c7ff1ea4a0d9939ded1f16474
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample004.ets
@@ -0,0 +1,129 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/**
+ * Image Attribute Test Component with renderMode
+ *
+ * This component demonstrates the usage of various image attributes such as dynamic range mode,
+ * enhanced image quality, and render mode. The `renderMode` attribute determines how the image is
+ * rendered on the screen.
+ *
+ * Supported Modes:
+ * - Original: Renders the image in its original colors and gradients. Suitable for general-purpose image display.
+ * - Template: Renders the image in a monochrome template style, typically used for icons where color is applied
+ * separately via tint or opacity.
+ *
+ * Users can toggle between these modes using interactive buttons. Other image properties like dynamicRangeMode and
+ * enhancedImageQuality are also demonstrated.
+ * The ImageModifier class applies predefined attributes including dynamicRangeMode, borderRadius, and
+ * enhancedImageQuality to the Image component.
+ */
+import { BusinessError } from '@ohos.base';
+import image from '@ohos.multimedia.image';
+
+class ImageModifier implements AttributeModifier<ImageAttribute> {
+  public value: DynamicRangeMode = DynamicRangeMode.HIGH
+  public bo: number = 10
+  public quality: image.ResolutionQuality = image.ResolutionQuality.MEDIUM
+
+  applyNormalAttribute(instance: ImageAttribute): void {
+    instance.dynamicRangeMode(this.value)
+    instance.borderRadius(this.bo)
+    instance.enhancedImageQuality(this.quality)
+  }
+}
+
+@Entry
+@Component
+struct DarkModeTest {
+  @State modifier: ImageModifier = new ImageModifier()
+  @State show: Boolean = true
+  @State het: number = 216
+  @State wid: number = 384
+  @State opacityValue: number = 0.4
+  @State parmDynamicRangeModeStr: string[] = [
+    'dynamicRangeMode = HIGH', 'dynamicRangeMode = CONSTRAINT', 'dynamicRangeMode = STANDARD'
+  ]
+  @State parmImageQualityStr: string[] = [
+    'ResolutionQuality.LOW', 'ResolutionQuality.MEDIUM', 'ResolutionQuality.HIGH'
+  ]
+  @State parmRenderModeStr: string[] = [
+    'ImageRenderMode.Origin', 'ImageRenderMode.Template'
+  ]
+  @State parmDynamicRangeMode: DynamicRangeMode[] = [
+    DynamicRangeMode.HIGH, DynamicRangeMode.CONSTRAINT, DynamicRangeMode.STANDARD
+  ]
+  @State parmImageQuality: image.ResolutionQuality[] = [
+    image.ResolutionQuality.LOW, image.ResolutionQuality.MEDIUM, image.ResolutionQuality.HIGH
+  ]
+  @State parmRenderMode: ImageRenderMode[] = [
+    ImageRenderMode.Original, ImageRenderMode.Template
+  ]
+  @State parm: DynamicRangeMode | undefined | number = DynamicRangeMode.HIGH
+  @State idx1: number = 0
+  @State idx2: number = 0
+  @State idx3: number = 0
+
+  build() {
+    Column() {
+      Button('IsShow')
+        .onClick(() => {
+          if (this.show) {
+            this.show = false;
+          } else {
+            this.show = true;
+          }
+        })
+      Divider()
+      Button('Change idx_DynamicRangeMode++ = ' + this.idx1)
+        .onClick(() => {
+          this.idx1 = (this.idx1 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ResolutionQuality++ = ' + this.idx2)
+        .onClick(() => {
+          this.idx2 = (this.idx2 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ImageRenderMode++ = ' + this.idx3)
+        .onClick(() => {
+          this.idx3 = (this.idx3 + 1) % 2
+        })
+      Divider()
+      Button('add opacity +0.1 ')
+        .onClick(() => {
+          this.opacityValue = this.opacityValue + 0.1
+        })
+      if (this.show) {
+        Divider()
+        Text(this.parmDynamicRangeModeStr[this.idx1])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmImageQualityStr[this.idx2])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmRenderModeStr[this.idx3])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Image($r('app.media.JPEGVividSingle'))
+          .height(this.het)
+          .width(this.wid)
+          .dynamicRangeMode(this.parmDynamicRangeMode[this.idx1])
+          .enhancedImageQuality(this.parmImageQuality[this.idx2])
+          .renderMode(this.parmRenderMode[this.idx3])
+      }
+    }.backgroundColor('#CCCCCC').width('100%').height('100%')
+  }
+}
\ No newline at end of file
diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample005.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample005.ets
new file mode 100644
index 0000000000000000000000000000000000000000..eb685fc2d7826dd4088a510d7bd490c18f6cfbc4
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample005.ets
@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/**
+ * This example demonstrates how to decode an HDR image using the ImageSource API
+ * and display it using a PixelMap in an ArkTS component.
+ */
+import { Size } from '@kit.ArkUI';
+import image from '@ohos.multimedia.image';
+
+@Entry
+@Component
+struct Index {
+  @State label: boolean = false;
+  @State s: Size = { width: 100, height: 100 }
+  @State pixelMap?: PixelMap = undefined
+
+  async decodeHdrImage(fileName: Resource) {
+    let img = await getContext(this).resourceManager.getMediaContent(fileName)
+    let imageSource:image.ImageSource = image.createImageSource(img.buffer.slice(0))
+
+    let options:image.DecodingOptions = {};
+    options.index = 0;
+    options.desiredDynamicRange = image.DecodingDynamicRange.AUTO; // 为AUTO表示按照图片本身是否为HDR来解码
+    imageSource.createPixelMap(options).then((pixelMap) => {
+      this.pixelMap = pixelMap
+    })
+  }
+
+  build() {
+    Stack() {
+      Column() {
+        Button('makePixelMap')
+          .width(100)
+          .height(100)
+          .onClick((event)=>{
+            this.decodeHdrImage($r('app.media.cat'))
+          })
+        Image(this.pixelMap)
+          .width(this.s.width)
+          .height(this.s.height)
+          .objectFit(ImageFit.Contain)
+      }
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
\ No newline at end of file
diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample006.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample006.ets
new file mode 100644
index 0000000000000000000000000000000000000000..71a99bd981ea1657c69fe7ede69642a39b316510
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample006.ets
@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/*
+ * This example demonstrates how to dynamically adjust image attributes such as dynamicRangeMode,
+ * enhancedImageQuality, renderMode, and objectFit in an ArkTS component. It includes UI controls to toggle
+ * image visibility and switch between different image display settings.
+ */
+
+import { BusinessError } from '@ohos.base';
+import image from '@ohos.multimedia.image';
+class ImageModifier implements AttributeModifier<ImageAttribute> {
+  public value: DynamicRangeMode = DynamicRangeMode.HIGH
+  public bo: number = 10
+  public qulity: image.ResolutionQuality = image.ResolutionQuality.MEDIUM
+  applyNormalAttribute(instance: ImageAttribute): void {
+    instance.dynamicRangeMode(this.value)
+    instance.borderRadius(this.bo)
+    instance.enhancedImageQuality(this.qulity)
+  }
+}
+@Entry
+@Component
+struct DarkModeTest {
+  @State modifier: ImageModifier = new ImageModifier()
+  @State show: Boolean = true
+  @State het: number = 216
+  @State wid: number = 384
+  @State opacityValue: number = 0.4
+  @State parmDynamicRangeModeStr: string[] = [
+    'dynamicRangeMode = HIGH','dynamicRangeMode = CONSTRAINT','dynamicRangeMode = STANDARD'
+  ]
+  @State parmImageQualityStr: string[] = [
+    'ResolutionQuality.LOW','ResolutionQuality.MEDIUM','ResolutionQuality.HIGH'
+  ]
+  @State parmRenderModeStr: string[] = [
+    'ImageRenderMode.Origin','ImageRenderMode.Template'
+  ]
+  @State parmDynamicRangeMode: DynamicRangeMode[] = [
+    DynamicRangeMode.HIGH, DynamicRangeMode.CONSTRAINT, DynamicRangeMode.STANDARD
+  ]
+  @State parmImageQuality: image.ResolutionQuality[] = [
+    image.ResolutionQuality.LOW, image.ResolutionQuality.MEDIUM, image.ResolutionQuality.HIGH
+  ]
+  @State parmRenderMode: ImageRenderMode[] = [
+    ImageRenderMode.Original, ImageRenderMode.Template
+  ]
+  @State parmObjectFit: ImageFit[] = [
+    ImageFit.Contain, ImageFit.Cover, ImageFit.Auto, ImageFit.Fill, ImageFit.ScaleDown, ImageFit.None
+  ]
+  @State parmObejectFitStr: string[] = [
+    'ImageFit.Contain',
+    'ImageFit.Cover',
+    'ImageFit.Auto',
+    'ImageFit.Fill',
+    'ImageFit.ScaleDown',
+    'ImageFit.None'
+  ]
+  @State parm: DynamicRangeMode | undefined |number = DynamicRangeMode.HIGH
+  @State idx1: number = 0
+  @State idx2: number = 0
+  @State idx3: number = 0
+  build() {
+    Column(){
+      Button('IsShow')
+        .onClick(() => {
+          if (this.show) {
+            this.show = false;
+          } else {
+            this.show = true;
+          }
+        })
+      Divider()
+      Button('Change idx_DynamicRangeMode++ = ' + this.idx1)
+        .onClick(()=>{
+          this.idx1 = (this.idx1 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ResolutionQuality++ = ' + this.idx2)
+        .onClick(()=>{
+          this.idx2 = (this.idx2 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ImageRenderMode++ = ' + this.idx3)
+        .onClick(()=>{
+          this.idx3 = (this.idx3 + 1) % 6
+        })
+      Divider()
+      Button('Change idx_ObejctFit = ' + this.idx3)
+        .onClick(()=>{
+          this.idx3 = (this.idx3 + 1) % 6
+        })
+      if (this.show) {
+        Divider()
+        Text(this.parmDynamicRangeModeStr[this.idx1])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmImageQualityStr[this.idx2])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmObejectFitStr[this.idx3])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Image($r('app.media.JPEGVividSingle'))
+          .height(this.het)
+          .width(this.wid)
+          .dynamicRangeMode(this.parmDynamicRangeMode[this.idx1])
+          .enhancedImageQuality(this.parmImageQuality[this.idx2])
+          .objectFit(this.parmObjectFit[this.idx3])
+      }
+    }.backgroundColor('#CCCCCC').width('100%').height('100%')
+  }
+}
\ No newline at end of file
diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample007.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample007.ets
new file mode 100644
index 0000000000000000000000000000000000000000..89ca009342429465ba35d17b0db19f119d759bb4
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample007.ets
@@ -0,0 +1,104 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/*
+ * Purpose: This example demonstrates how to load a network image using HTTP and decode it into a PixelMap for display.
+ * It also shows how to apply dynamic image attributes such as dynamicRangeMode and borderRadius via a modifier.
+ */
+import http from '@ohos.net.http';
+import ResponseCode from '@ohos.net.http';
+import image from '@ohos.multimedia.image';
+import { BusinessError } from '@ohos.base';
+
+class ImageModifier implements AttributeModifier<ImageAttribute> {
+  public value: DynamicRangeMode = DynamicRangeMode.HIGH
+  public bo: number = 10
+
+  applyNormalAttribute(instance: ImageAttribute): void {
+    instance.dynamicRangeMode(this.value)
+    instance.borderRadius(this.bo)
+  }
+}
+
+@Entry
+@Component
+struct DarkModeTest {
+  @State modifier: ImageModifier = new ImageModifier()
+  @State show: Boolean = true
+  @State imagePixelMap: PixelMap | undefined = undefined;
+
+  httpRequest() {
+    http.createHttp().request(
+      'xxx.gif', // 填写具体网络图片地址
+      (error: BusinessError, data: http.HttpResponse) => {
+        if (error) {
+          console.error(`WYXX http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
+        } else {
+          console.error(`WYXX http reqeust success.`);
+          let imageData: ArrayBuffer = data.result as ArrayBuffer;
+          let imageSource: image.ImageSource = image.createImageSource(imageData);
+          console.error(`WYXX http reqeust size = ${imageData.byteLength}`);
+
+          class Tmp {
+            public height: number = 100
+            public width: number = 100
+          }
+
+          let options: Record<string, number | boolean | Tmp> = {
+            'alphaType': 0, // 透明度
+            'editable': false, // 是否可编辑
+            'pixelFormat': 3, // 像素格式
+            'scaleMode': 1, // 缩略值
+            'size': { height: 100, width: 100 }
+          } // 创建图片大小
+          imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
+            this.imagePixelMap = pixelMap
+          })
+        }
+      }
+    )
+  }
+
+  build() {
+    Column() {
+      Button('Show')
+        .onClick(() => {
+          if (this.show) {
+            this.show = false;
+          } else {
+            this.show = true;
+          }
+        })
+      if (this.show) {
+        Image($r('app.media.svg_text'))
+          .height(200)
+          .width(200)
+          .fillColor(Color.Red)
+        Divider()
+        Image($r('app.media.cat'))
+          .height('350vp')
+          .width('350vp')
+          .attributeModifier(this.modifier)
+          .onClick(() => {
+            this.modifier.value = DynamicRangeMode.CONSTRAINT
+            this.modifier.bo = 30
+          })
+          .renderMode(ImageRenderMode.Original)
+          .dynamicRangeMode(DynamicRangeMode.CONSTRAINT)
+          .enhancedImageQuality(image.ResolutionQuality.LOW)
+      }
+    }.backgroundColor('#CCCCCC').width('100%').height('100%')
+  }
+}
\ No newline at end of file
diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample008.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample008.ets
new file mode 100644
index 0000000000000000000000000000000000000000..34bb71ca09db9d2ebc03a8841d69124b5c3e219b
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample008.ets
@@ -0,0 +1,120 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/*
+ * Purpose: This example demonstrates how to create an ArkTS component that allows dynamic modification of
+ * image attributes.
+ *
+ * It includes controls for toggling image visibility, adjusting dynamic range mode, resolution quality,
+ * render mode, and opacity. The 'opacity' property is used to control the transparency of the image.
+ */
+import { BusinessError } from '@ohos.base';
+import image from '@ohos.multimedia.image';
+
+class ImageModifier implements AttributeModifier<ImageAttribute> {
+  public value: DynamicRangeMode = DynamicRangeMode.HIGH
+  public bo: number = 10
+  public qulity: image.ResolutionQuality = image.ResolutionQuality.MEDIUM
+
+  applyNormalAttribute(instance: ImageAttribute): void {
+    instance.dynamicRangeMode(this.value)
+    instance.borderRadius(this.bo)
+    instance.enhancedImageQuality(this.qulity)
+  }
+}
+
+@Entry
+@Component
+struct DarkModeTest {
+  @State modifier: ImageModifier = new ImageModifier()
+  @State show: Boolean = true
+  @State het: number = 216
+  @State wid: number = 384
+  @State opacityValue: number = 0.4
+  @State parmDynamicRangeModeStr: string[] = [
+    'dynamicRangeMode = HIGH', 'dynamicRangeMode = CONSTRAINT', 'dynamicRangeMode = STANDARD'
+  ]
+  @State parmImageQualityStr: string[] = [
+    'ResolutionQuality.LOW', 'ResolutionQuality.MEDIUM', 'ResolutionQuality.HIGH'
+  ]
+  @State parmRenderModeStr: string[] = [
+    'ImageRenderMode.Origin', 'ImageRenderMode.Template'
+  ]
+  @State parmDynamicRangeMode: DynamicRangeMode[] = [
+    DynamicRangeMode.HIGH, DynamicRangeMode.CONSTRAINT, DynamicRangeMode.STANDARD
+  ]
+  @State parmImageQuality: image.ResolutionQuality[] = [
+    image.ResolutionQuality.LOW, image.ResolutionQuality.MEDIUM, image.ResolutionQuality.HIGH
+  ]
+  @State parmRenderMode: ImageRenderMode[] = [
+    ImageRenderMode.Original, ImageRenderMode.Template
+  ]
+  @State parm: DynamicRangeMode | undefined | number = DynamicRangeMode.HIGH
+  @State idx1: number = 0
+  @State idx2: number = 0
+  @State idx3: number = 0
+
+  build() {
+    Column() {
+      Button('IsShow')
+        .onClick(() => {
+          if (this.show) {
+            this.show = false;
+          } else {
+            this.show = true;
+          }
+        })
+      Divider()
+      Button('Change idx_DynamicRangeMode++ = ' + this.idx1)
+        .onClick(() => {
+          this.idx1 = (this.idx1 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ResolutionQuality++ = ' + this.idx2)
+        .onClick(() => {
+          this.idx2 = (this.idx2 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ImageRenderMode++ = ' + this.idx3)
+        .onClick(() => {
+          this.idx3 = (this.idx3 + 1) % 2
+        })
+      Divider()
+      Button('add opacity +0.1 ')
+        .onClick(() => {
+          this.opacityValue = this.opacityValue + 0.1
+        })
+      if (this.show) {
+        Divider()
+        Text(this.parmDynamicRangeModeStr[this.idx1])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmImageQualityStr[this.idx2])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmRenderModeStr[this.idx3])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Image($r('app.media.JPEGVividSingle'))
+          .height(this.het)
+          .width(this.wid)
+          .alt($r('app.media.JPEGISOSingle'))
+          .dynamicRangeMode(this.parmDynamicRangeMode[this.idx1])
+          .enhancedImageQuality(this.parmImageQuality[this.idx2])
+          .opacity(this.opacityValue)
+      }
+    }.backgroundColor('#CCCCCC').width('100%').height('100%')
+  }
+}
\ No newline at end of file
diff --git a/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample009.ets b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample009.ets
new file mode 100644
index 0000000000000000000000000000000000000000..e92c30d53c2d0cfab06f3c8e04418d097524aca7
--- /dev/null
+++ b/examples/Image/entry/src/main/ets/pages/ImageHdrExamples/ImageHdrExample009.ets
@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2025 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.
+ */
+
+/*
+ * Purpose: This example demonstrates how to create an ArkTS component that allows dynamic modification of
+ * image attributes.
+ * It includes controls for toggling image visibility, changing the source image, adjusting dynamic range mode,
+ * resolution quality, render mode, and interpolation. The 'interpolation' property controls how the image is
+ * scaled or resized.
+ */
+
+import { BusinessError } from '@ohos.base';
+import image from '@ohos.multimedia.image';
+
+class ImageModifier implements AttributeModifier<ImageAttribute> {
+  public value: DynamicRangeMode = DynamicRangeMode.HIGH
+  public bo: number = 10
+  public quality: image.ResolutionQuality = image.ResolutionQuality.MEDIUM
+
+  applyNormalAttribute(instance: ImageAttribute): void {
+    instance.dynamicRangeMode(this.value)
+    instance.borderRadius(this.bo)
+    instance.enhancedImageQuality(this.quality)
+  }
+}
+
+@Entry
+@Component
+struct DarkModeTest {
+  @State modifier: ImageModifier = new ImageModifier()
+  @State show: Boolean = true
+  @State het: number = 216
+  @State wid: number = 384
+  @State opacityValue: number = 0.4
+  @State parmSrcStr: string[] = [
+    'app.media.cat', 'app.media.JPEGVividSingle', 'app.media.1', 'app.media.add_book',
+    'app.media.beer', 'app.media.car'
+  ]
+  @State parmDynamicRangeModeStr: string[] = [
+    'dynamicRangeMode = HIGH', 'dynamicRangeMode = CONSTRAINT', 'dynamicRangeMode = STANDARD'
+  ]
+  @State parmImageQualityStr: string[] = [
+    'ResolutionQuality.LOW', 'ResolutionQuality.MEDIUM', 'ResolutionQuality.HIGH'
+  ]
+  @State parmRenderModeStr: string[] = [
+    'ImageRenderMode.Origin', 'ImageRenderMode.Template'
+  ]
+  @State parmDynamicRangeMode: DynamicRangeMode[] = [
+    DynamicRangeMode.HIGH, DynamicRangeMode.CONSTRAINT, DynamicRangeMode.STANDARD
+  ]
+  @State parmImageQuality: image.ResolutionQuality[] = [
+    image.ResolutionQuality.LOW, image.ResolutionQuality.MEDIUM, image.ResolutionQuality.HIGH
+  ]
+  @State parmRenderMode: ImageRenderMode[] = [
+    ImageRenderMode.Original, ImageRenderMode.Template
+  ]
+  @State parmInterpolation: ImageInterpolation[] = [
+    ImageInterpolation.None, ImageInterpolation.Low,
+    ImageInterpolation.Medium, ImageInterpolation.High
+  ]
+  @State parmInterpolationStr: string[] = [
+    'ImageInterpolation.None', 'ImageInterpolation.Low',
+    'ImageInterpolation.Medium', 'ImageInterpolation.High'
+  ]
+  @State parm: DynamicRangeMode | undefined | number = DynamicRangeMode.HIGH
+  @State idx0: number = 0
+  @State idx1: number = 0
+  @State idx2: number = 0
+  @State idx3: number = 0
+
+  build() {
+    Column() {
+      Button('IsShow')
+        .onClick(() => {
+          if (this.show) {
+            this.show = false;
+          } else {
+            this.show = true;
+          }
+        })
+      Button('Change idx_Src++ = ' + this.idx0)
+        .onClick(() => {
+          this.idx0 = (this.idx0 + 1) % this.parmSrcStr.length
+        })
+      Divider()
+      Button('Change idx_DynamicRangeMode++ = ' + this.idx1)
+        .onClick(() => {
+          this.idx1 = (this.idx1 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ResolutionQuality++ = ' + this.idx2)
+        .onClick(() => {
+          this.idx2 = (this.idx2 + 1) % 3
+        })
+      Divider()
+      Button('Change idx_ImageRenderMode++ = ' + this.idx3)
+        .onClick(() => {
+          this.idx3 = (this.idx3 + 1) % 4
+        })
+      Divider()
+      Button('Change idx_Interpolation = ' + this.idx3)
+        .onClick(() => {
+          this.idx3 = (this.idx3 + 1) % 4
+        })
+      if (this.show) {
+        Divider()
+        Text(this.parmDynamicRangeModeStr[this.idx1])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmImageQualityStr[this.idx2])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Text(this.parmInterpolationStr[this.idx3])
+          .fontWeight(FontWeight.Bolder)
+        Divider()
+        Image($r(this.parmSrcStr[this.idx0]))
+          .height(this.het)
+          .width(this.wid)
+          .dynamicRangeMode(this.parmDynamicRangeMode[this.idx1])
+          .enhancedImageQuality(this.parmImageQuality[this.idx2])
+          .interpolation(this.parmInterpolation[this.idx3])
+      }
+    }.backgroundColor('#CCCCCC').width('100%').height('100%')
+  }
+}
\ No newline at end of file