diff --git a/docs/en-US/component/image.md b/docs/en-US/component/image.md
index eb4f107a25..82989cf907 100644
--- a/docs/en-US/component/image.md
+++ b/docs/en-US/component/image.md
@@ -65,12 +65,20 @@ image/manually-preview
 
 ## Custom Toolbar ^(2.9.4)
 
-:::demo Custom toolbar content by `toolbar` slot, starting from version ^(2.9.7) , the slot has a new `setActiveItem` function, which can be switched according to the index.
+:::demo Custom toolbar content by `toolbar` slot, starting from version ^(2.9.7), the slot has a new `setActiveItem` function, which can be switched according to the index.
 
 image/custom-toolbar
 
 :::
 
+## Custom progress ^(2.9.4)
+
+:::demo By setting the `show-progress` prop to control whether to display progress when previewing an image. After version ^(2.9.8), the progress content will be displayed as long as the `progress` slot is used.
+
+image/custom-progress
+
+:::
+
 ## Image API
 
 ### Image Attributes
@@ -95,7 +103,7 @@ image/custom-toolbar
 | zoom-rate              | the zoom rate of the image viewer zoom event.                                                                                                     | ^[number]                                                               | 1.2     |
 | min-scale ^(2.4.0)     | the min scale of the image viewer zoom event.                                                                                                     | ^[number]                                                               | 0.2     |
 | max-scale ^(2.4.0)     | the max scale of the image viewer zoom event.                                                                                                     | ^[number]                                                               | 7       |
-| show-progress ^(2.9.4) | whether to display the preview image progress content                                                                                             | ^[boolean]                                                              | false   |
+| show-progress ^(2.9.4) | whether to display the preview image progress content.                                                                                            | ^[boolean]                                                              | false   |
 
 ### Image Events
 
@@ -109,13 +117,13 @@ image/custom-toolbar
 
 ### Image Slots
 
-| Name              | Description                                              | Type                                                                                                                                                                                                              |
-| ----------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| placeholder       | custom placeholder content when image hasn't loaded yet. | -                                                                                                                                                                                                                 |
-| error             | custom image load failed content.                        | -                                                                                                                                                                                                                 |
-| viewer            | custom content when image preview.                       | -                                                                                                                                                                                                                 |
-| progress ^(2.9.4) | custom progress content when image preview.              | ^[object]`{ activeIndex: number, total: number }`                                                                                                                                                                 |
-| toolbar ^(2.9.4)  | custom toolbar content when image preview.               | ^[object]`{actions: (action: ImageViewerAction, options?: ImageViewerActionOptions ) => void, prev: ()=> void, next: () => void,reset: () => void, activeIndex: number }, setActiveItem: (index: number) => void` |
+| Name              | Description                                                                                | Type                                                                                                                                                                                                              |
+| ----------------- | ------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| placeholder       | custom placeholder content when image hasn't loaded yet.                                   | -                                                                                                                                                                                                                 |
+| error             | custom image load failed content.                                                          | -                                                                                                                                                                                                                 |
+| viewer            | custom content when image preview.                                                         | -                                                                                                                                                                                                                 |
+| progress ^(2.9.4) | custom progress content when image preview. (Priority is higher than `show-progress` prop) | ^[object]`{ activeIndex: number, total: number }`                                                                                                                                                                 |
+| toolbar ^(2.9.4)  | custom toolbar content when image preview.                                                 | ^[object]`{actions: (action: ImageViewerAction, options?: ImageViewerActionOptions ) => void, prev: ()=> void, next: () => void,reset: () => void, activeIndex: number }, setActiveItem: (index: number) => void` |
 
 ### Image Exposes
 
diff --git a/docs/examples/image/custom-progress.vue b/docs/examples/image/custom-progress.vue
new file mode 100644
index 0000000000..6ec54dcf22
--- /dev/null
+++ b/docs/examples/image/custom-progress.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="demo-image__custom-toolbar">
+    <el-image
+      style="width: 100px; height: 100px"
+      :src="url"
+      :preview-src-list="srcList"
+      fit="cover"
+    >
+      <template #progress="{ activeIndex, total }">
+        <span>{{ activeIndex + 1 + '-' + total }}</span>
+      </template>
+    </el-image>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const url =
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
+const srcList = [
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+]
+</script>
diff --git a/docs/examples/image/custom-toolbar.vue b/docs/examples/image/custom-toolbar.vue
index 7277e38d54..f5ed71880d 100644
--- a/docs/examples/image/custom-toolbar.vue
+++ b/docs/examples/image/custom-toolbar.vue
@@ -7,9 +7,6 @@
       fit="cover"
       show-progress
     >
-      <template #progress="{ activeIndex, total }">
-        <span>{{ activeIndex + 1 + '-' + total }}</span>
-      </template>
       <template
         #toolbar="{ actions, prev, next, reset, activeIndex, setActiveItem }"
       >
diff --git a/packages/components/image-viewer/src/image-viewer.vue b/packages/components/image-viewer/src/image-viewer.vue
index e1cee87135..48d017fda6 100644
--- a/packages/components/image-viewer/src/image-viewer.vue
+++ b/packages/components/image-viewer/src/image-viewer.vue
@@ -37,7 +37,10 @@
               </el-icon>
             </span>
           </template>
-          <div v-if="showProgress" :class="[ns.e('btn'), ns.e('progress')]">
+          <div
+            v-if="$slots.progress || showProgress"
+            :class="[ns.e('btn'), ns.e('progress')]"
+          >
             <slot
               name="progress"
               :active-index="activeIndex"